用于服务器端渲染的 create-react-app 打字稿答案

【问题标题】：create-react-app typescript for server-side-rending用于服务器端渲染的 create-react-app 打字稿
【发布时间】：2020-03-21 17:54:33
【问题描述】：

我有一个由 create-react-app typescript（tsx 文件）构建的项目。

我现在想制作项目 SSR，但不知道如何开始。

在使用 this article 之后的 typescript 之前，我能够进行 SSR

如果您能给我指导，不胜感激

【问题讨论】：

标签： reactjs typescript express create-react-app server-side-rendering

【解决方案1】：

我在挣扎了 8 个小时后解决了这个问题。

您不能将 react 的 tsconfig 文件用于服务器。

我必须制作一个新的配置文件。 (server.tsconfig.json)

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "*": ["*", "./src/@types/*"]
    },
    "outDir": "./dist",
    "target": "es5",
    "typeRoots": ["./src/@types", "./node_modules/@types"],
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noImplicitAny": false,
    "moduleResolution": "node",
    "strictNullChecks": false,
    "jsx": "react",
    "noEmit": true
  },
  "exclude": ["node_modules"]
}

并在运行 ts-node 时指明此配置

ts-node --project server.tsconfig.json --require tsconfig-paths/register server/index.js

如果您使用自定义类型，则必须在服务器文件中添加类型的引用

/// <reference path="../src/@types/global.d.ts" />

我希望这会节省您的时间

【讨论】：

你在导入'ignore-styles'模块吗？你是如何应用 css 或 sass 的？
@adadortiz 能否提供客户端 react 应用和服务器的完整代码？
@ahadortiz 能否提供此类应用程序的示例代码

【解决方案2】：

几个月前我发现自己穿着这双鞋。我在配置客户端和服务器代码以使用打字稿方面遇到了很多困难。

做对了之后，我创建了一个包含模板和其他开发配置的存储库。

看看server-side rendered react with typescript

使用此模板启动新项目非常容易。

【讨论】：