terminology/13_server_side_rendering.js at master · arifhossen-dev/terminology · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
/*
Server-side rendering (SSR) is the process of rendering web pages on the server and sending the generated HTML to the client. SSR can improve the performance and user experience of web applications by reducing the amount of client-side processing required and enabling faster page loading times.

Here's a basic example of how to implement server-side rendering in a MERN stack application:

Install the necessary dependencies:

npm install express react react-dom react-router-dom

Create an index.js file for the server:

const express = require('express');
const path = require('path');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { StaticRouter } = require('react-router-dom');
const App = require('./src/App');

const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('*', (req, res) => {
  const context = {};
  const html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>My MERN App</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});


Create a src directory and an App.js file for the client:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  );
};

export default App;


Create Home.js and About.js components:

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to my MERN app!</h1>
      <p>This is the home page.</p>
    </div>
  );
};

export default Home;

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About</h1>
      <p>This is the about page.</p>
    </div>
  );
};

export default About;
Create a webpack.config.js file to bundle the client-side code:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  }
};
Run the webpack server and the node server:

npx webpack-dev-server --mode development --open
node index.js
When you visit http://localhost:3000 in your browser, you should see the rendered HTML for the home page. If you view the page source, you should see that the content is rendered on the server and sent to the


When it comes to implementing server-side rendering in a MERN stack application, there are several tools and libraries that can be used. One popular choice is Next.js, a React framework that offers built-in server-side rendering and other features to simplify the development process.

To use server-side rendering in a Next.js application, you can create pages as React components and export them as modules. These components can then be rendered on the server using Node.js and returned to the client as HTML, allowing for faster initial page loads and better search engine optimization.

Here's an example of a server-side rendered page using Next.js:


import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to my MERN Stack App!</h1>
      <p>This page is rendered on the server using Next.js.</p>
    </div>
  );
};

export default Home;

In addition to Next.js, other libraries and frameworks like Gatsby and Next Express can also be used to implement server-side rendering in a MERN stack application.

One important thing to keep in mind when using server-side rendering is to ensure that your application remains performant. Server-side rendering can be resource-intensive, so it's important to use caching and other optimization techniques to reduce the load on your server and improve the user experience.

Overall, server-side rendering can be a powerful tool for optimizing the performance and SEO of your MERN stack application, and there are many resources available to help you get started.


*/