SSR-рендеринг: полное руководство по серверному рендерингу

  1. SSR с Node.js и Express.
    Одним из популярных методов SSR-рендеринга является использование Node.js и Express. Вот базовый пример того, как можно добиться реформы в сфере безопасности с помощью этих технологий:
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');
const server = express();
server.get('/', (req, res) => {
  const appString = ReactDOMServer.renderToString(React.createElement(App));
  res.send(`
    <html>
      <head>
        <title>SSR Rendering Example</title>
      </head>
      <body>
        <div id="root">${appString}</div>
        <script src="/client.js"></script>
      </body>
    </html>
  `);
});
server.listen(3000, () => {
  console.log('Server is listening on port 3000');
});
  1. SSR с Next.js:
    Next.js — это популярная платформа JavaScript, упрощающая процесс создания приложений SSR. Вот пример SSR-рендеринга с использованием Next.js:
// pages/index.js
import React from 'react';
const Home = () => {
  return <h1>Hello, SSR rendering with Next.js!</h1>;
};
export default Home;

Next.js автоматически обрабатывает SSR-рендеринг, поэтому вам не нужно настраивать отдельный сервер. Просто запустите npm run dev, чтобы запустить сервер разработки Next.js.

  1. SSR с Angular Universal:
    Angular Universal — это платформа для серверного рендеринга в приложениях Angular. Вот пример SSR-рендеринга с использованием Angular Universal:
// src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<h1>Hello, SSR rendering with Angular Universal!</h1>`,
})
export class AppComponent {}
// src/main.server.ts
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import { AppServerModuleNgFactory } from '../dist/server/main';
enableProdMode();
const html = await renderModuleFactory(AppServerModuleNgFactory, {
  document: '<app-root></app-root>',
});
console.log(html);
  1. SSR с Django:
    Если вы используете Python, Django предоставляет встроенную поддержку SSR-рендеринга. Вот пример использования системы шаблонов Django:
<!-- templates/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>SSR Rendering Example</title>
  </head>
  <body>
    <h1>Hello, SSR rendering with Django!</h1>
  </body>
</html>

В представлении Django вы можете просто отобразить шаблон и вернуть его в качестве ответа клиенту.