Как правильно настроить ssr в next.js?

1
2

import App from "next/app";
import React from "react";

 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} />;
  }
}

1
2
3
4
5
6
7

import { withApollo } from "../lib/apollo";

class MyApp extends App {
  ...
}

export default withApollo(MyApp);

 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 } =

1
2
3
4
5
6
7
8
9

import React from 'react';

export default function Home() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

export async function getServerSideProps() {
  // Загрузка данных с сервера
  const data = { message: 'This is server-side rendered content' };

  return {
    props: { data },
  };
}

const Home = ({ data }) => {
  return (
    <div>
      <h1>{data.message}</h1>
    </div>
  );
}

export default Home;