Как правильно настроить ssr в nextjs?

@delphine_bartoletti 

SSR (Server-Side Rendering) - это важный аспект при разработке веб-приложений на Next.js, который позволяет генерировать HTML-страницы на сервере, вместо того, чтобы делать это на клиентской стороне, что обеспечивает более быструю загрузку страниц и лучшую SEO-оптимизацию.

Чтобы настроить SSR в Next.js, нужно выполнить следующие шаги:

1. Установите необходимые зависимости:

1

npm install next react react-dom

1. Создайте файл server.js в корневой директории проекта и добавьте следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare()
  .then(() => {
    const server = express();

    server.get('*', (req, res) => {
      return handle(req, res);
    });

    server.listen(3000, (err) => {
      if (err) throw err;
      console.log('> Ready on http://localhost:3000');
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

1. Добавьте следующую строку в scripts секцию вашего package.json файла:

1

"dev": "node server.js"

1. Создайте страницу в директории pages (например, pages/index.js), например:

1
2
3
4
5
6
7

import React from 'react';

const Index = () => {
  return <div>Hello World!</div>;
};

export default Index;

Теперь вы можете запустить приложение командой npm run dev, и вы должны увидеть Hello World! при переходе на http://localhost:3000.

Вы можете продолжать создавать страницы в директории pages, и они будут автоматически подключаться к приложению и использовать SSR.

Это только основы настройки SSR в Next.js, и вы можете настроить его более тонко, используя многочисленные опции и API, предоставляемые Next.js.