React Ssr React-Router

user_19844409 0
Viewed 37

Can someone, please, explain - how to create SSR with React Routes V6, There are a lot of snippets with simple React SSR - without routes.

Maybe there is any course or lesson about React-SSR and it would be great if there would be SSR with react-routers (react-router-dom, especially V6), or any GitHub repo.

Most problem is <StaticRoutes> - i saw documentation but i didn`t get it... :(

Need it for my project - https://github.com/Ivan-Bliminse/movie-b-movie

server-side-rendering reactjs
4 Answers

SO DONE !

delete "type" : "module" from package.json, if you dont have it then ok,

in folder 'server' create 1 more file => index.js

index.js

require("@babel/register")({
  ignore: [/(node_module)/],
  presets: ["@babel/preset-env", "@babel/preset-react"],
});

require("./server");

and in package.json

"ssr": "node server/index.js"
or
"ssr": "nodemon server/index.js"

ofc before all - install packages

    "@babel/core": "^7.18.13",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-env": "^7.18.10",
    "@babel/register": "^7.18.9",
    "express": "^4.18.1",
    "nodemon": "^2.0.19",
user_198444090

This doc could help with React-SSR using react-router v6: reactrouter.com/en/v6.3.0/guides/ssr.

user_18836390

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="../src/index.js"></script>
  </body>
</html>

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

src/App.js

import React from "react";
import { Routes, Route } from "react-router-dom";
import Home from "./Component/Home";
import Nav from "./Component/Nav";
import Page1 from "./Component/Page1";
import Page2 from "./Component/Page2";
import Page3 from "./Component/Page3";

const App = () => {
  return (
    <div>
      <Nav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      </Routes>
    </div>
  );
};

export default App;

server/index.js

import express from "express";
import React from "react";
import ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router-dom/server";
import App from "../src/App";

let app = express();

app.get("*", (req, res) => {
  let html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );
  res.send(html);
});

app.listen(8800, () => {
  console.log("Blim Server ON!");
});

package.json

{
  "name": "stack-overflow",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "dev": "parcel public/index.html",
    "build": "parcel build public/index.html",
    "serve": "nodemon server/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.13",
    "@babel/preset-react": "^7.18.6",
    "eslint": "^8.23.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-react": "^7.31.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "express": "^4.18.1",
    "parcel-bundler": "^1.12.5"
  },
  "dependencies": {
    "nodemon": "^2.0.19",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0"
  }
}

.eslintrc.json

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
    commonjs: true,
    amd: true,
  },
  extends: [
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/recommended",
  ],
  plugins: ["react-hooks"],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module",
  },
  rules: {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
  },
  settings: {
    react: {
      version: "detect",
    },
  },
};
user_198444090

Ok, i found a way to fix it in package.json add "type" : "module", But now it is showing me this :

file:///C:/Users/%D0%A5/Desktop/JSVSC/TEST/Server%20Side%20Rendering/stack-overflow/server/index.js:11
    <StaticRouter location={req.url}>
    ^

SyntaxError: Unexpected token '<'
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:139:18)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:236:14)
    at async link (node:internal/modules/esm/module_job:67:21)
[nodemon] app crashed - waiting for file changes before starting...
user_198444090
Related