create-react-app typescript for server-side-rending

Question

I have a project built by create-react-app typescript (tsx files).

I want to make the project SSR now, but I'm not sure how to start.

I was able to do SSR before using typescript following this article

appreciated if you can give me a guide

Answer 1

I fixed the problem after struggling for 8 hours.

You can't use the react's tsconfig file for the server.

I had to make a new config file. (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"]
}

and indicate this configuration when running ts-node

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

You have to add reference of types on the server file if you used custom types

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

I hope this will save your time

Answer 2

I found myself in this shoe a few months ago. I struggled a lot with configuring both the client and server codes to use typescript.

After getting it right, I created a repository containing the templates and other development configurations.

Take a look at server-side rendered react with typescript

It's quite easy to start up a new project with this template.