feat(react): add SSR support to React apps

[jaysoo]

Add a generator @nrwl/react:setup-ssr that generates SSR support and minimal Express server for serving the SSR and CSR app.

Changes

• Add @nrwl/react:setup-ssr generator that adds an SSR entry point (main.server.ts) for React apps, and a server.ts file that contains a simple Express app.
• Add @nrwl/web:ssr-dev-server executor that wraps the client and server build targets as a single target. Allows options override via browserTargetOptions and serverTargetOptions.
• Move async iterable helpers to @nrwl/js so we can reused them in the ssr-dev-server (we can consider moving them to devkit as well)

Example

Say there is a React app demo at apps/demo, then user can run nx g @nrwl/react:setup-ssr demo, and the following three files will be added:

apps/demo
├── server.ts             # Express server
│   ├── main.server.tsx   # SSR entry file
│   └── ...
├── tsconfig.server.json  # Server-specific ts config
└── ...

[nx-cloud-staging]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit f084749. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 11 targets

• nx affected --target=e2e --base=70e43cdc7782aa3ec645901ccabfc33053e99325 --head=f0847496146cfd9219a022148122b40f9036a650 --exclude=e2e-storybook,e2e-storybook-angular,e2e-react-native,e2e-detox --parallel=1
• nx depcheck --no-dte
• nx affected --target=lint --base=70e43cdc7782aa3ec645901ccabfc33053e99325 --head=f0847496146cfd9219a022148122b40f9036a650 --parallel=3
• nx lint --no-dte
• nx check-lock-files --no-dte
• nx check-commit --no-dte
• nx affected --target=build --base=70e43cdc7782aa3ec645901ccabfc33053e99325 --head=f0847496146cfd9219a022148122b40f9036a650 --parallel=3
• nx-cloud record -- nx format:check --base=70e43cdc7782aa3ec645901ccabfc33053e99325 --head=f0847496146cfd9219a022148122b40f9036a650
• nx affected --target=test --base=70e43cdc7782aa3ec645901ccabfc33053e99325 --head=f0847496146cfd9219a022148122b40f9036a650 --parallel=1
• nx check-imports --no-dte
• nx documentation --no-dte

---

Sent with 💌 from NxCloud.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
nx-dev	✅ Ready (Inspect)	Visit Preview	Nov 21, 2022 at 6:51PM (UTC)

[Coly010]

LGTM! 🎉

I left a couple of non-blocking comments/questions.

[Coly010]

I know it's a little verbose, but can we mention react project to prevent any ambiguity?

[Coly010]

It may not be a big deal, but in Angular we maintain serve as pointing to the browser build, and have a serve-ssr for running browser + server. We don't have a single serve-server to just serve the server.

So we align these? I followed the nguniversal approach of having serve and serve-ssr along with a server target with the last being the actual build for the server.

I don't mind, it can be cleanup, but not sure if we want the same DX across both or not

[jaysoo]

I see. I think it's not useful to have serve only do CSR. Especially if the server provides endpoints needed by the client (like backend-for-frontend).

[jaysoo]

Moved to its own file.

[jaysoo]

I see. I think it's not useful to have serve only do CSR. Especially if the server provides endpoints needed by the client (like backend-for-frontend).

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.