@rudolph_senger
SSR (Server Side Rendering) является встроенной функциональностью в Next.js. При создании приложения Next.js, все страницы по умолчанию рендерятся на сервере. Чтобы настроить SSR в Next.js, следуйте этим шагам:
- Создайте файл _app.js в корневом каталоге проекта (если его нет). Этот файл используется для настройки приложения Next.js.
- Импортируйте компонент App из next/app и компонент React:
1
2
|
import App from "next/app";
import React from "react";
|
- Определите свойства и методы getInitialProps() в вашем компоненте App. Этот метод вызывается на сервере при каждом запросе и клиенте при первой загрузке страницы. Он используется для предварительной загрузки данных, которые необходимы для рендеринга страницы.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
const pageProps = Component.getInitialProps
? await Component.getInitialProps(ctx)
: {};
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
return <Component {...pageProps} />;
}
}
|
- Оберните свой компонент MyApp в withApollo HOC, чтобы подключить его к GraphQL клиенту Apollo. Это обеспечит передачу данных между сервером и клиентом.
1
2
3
4
5
6
7
|
import { withApollo } from "../lib/apollo";
class MyApp extends App {
...
}
export default withApollo(MyApp);
|
- Создайте файл apollo.js в директории lib. В этом файле определите конфигурацию Apollo клиента и экспортируйте функцию withApollo.
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
|
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
import { getDataFromTree } from "@apollo/client/react/ssr";
import { useMemo } from "react";
let apolloClient;
function createApolloClient() {
return new ApolloClient({
ssrMode: typeof window === "undefined",
link: new HttpLink({
uri: "http://localhost:3000/graphql",
credentials: "same-origin",
}),
cache: new InMemoryCache(),
});
}
export function initializeApollo(initialState = null) {
const _apolloClient = apolloClient ?? createApolloClient();
if (initialState) {
_apolloClient.cache.restore(initialState);
}
if (typeof window === "undefined") return _apolloClient;
if (!apolloClient) apolloClient = _apolloClient;
return _apolloClient;
}
export function withApollo(Component) {
const WithApollo = ({ apolloClient, apolloState, ...pageProps }) => {
const client = useMemo(() => apolloClient ?? initializeApollo(apolloState), [
apolloClient,
apolloState,
]);
return <Component {...pageProps} apolloClient={client} />;
};
if (Component.getInitialProps) {
WithApollo.getInitialProps = async (ctx) => {
const { AppTree } =
|