diff --git a/packages/playground b/packages/playground index 3fd257c7ef..02741a98d4 160000 --- a/packages/playground +++ b/packages/playground @@ -1 +1 @@ -Subproject commit 3fd257c7ef52313bbf9b56b331a44fdcd345900a +Subproject commit 02741a98d45244046f89c8725c678247264227bc diff --git a/packages/web/examples/ssr-app-router/.eslintignore b/packages/web/examples/ssr-app-router/.eslintignore new file mode 100644 index 0000000000..a680367ef5 --- /dev/null +++ b/packages/web/examples/ssr-app-router/.eslintignore @@ -0,0 +1 @@ +.next diff --git a/packages/web/examples/ssr-app-router/app/_app.js b/packages/web/examples/ssr-app-router/app/_app.js new file mode 100644 index 0000000000..d33cba6057 --- /dev/null +++ b/packages/web/examples/ssr-app-router/app/_app.js @@ -0,0 +1,32 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import App from 'next/app'; +import { getServerState } from '@appbaseio/reactivesearch'; + +import '../styles/movies.css'; +import '../styles/index.css'; +import Main from './page'; + +class MyApp extends App { + static async getInitialProps({ Component, ctx }) { + let pageProps = {}; + + if (Component.getInitialProps) { + pageProps = await Component.getInitialProps(ctx); + } + + // Perform your server-side data fetching or initialization here + let initialState = {}; + initialState = await getServerState(Main, ctx.resolvedUrl); + + return { pageProps, initialState }; + } + + render() { + const { Component, pageProps, initialState } = this.props; + + return ; + } +} + +export default MyApp; diff --git a/packages/web/examples/ssr-app-router/app/_document.js b/packages/web/examples/ssr-app-router/app/_document.js new file mode 100644 index 0000000000..672a837041 --- /dev/null +++ b/packages/web/examples/ssr-app-router/app/_document.js @@ -0,0 +1,41 @@ +import React from 'react'; +import Document, { Head, Html, Main, NextScript } from 'next/document'; +import { renderToString } from 'react-dom/server'; + +export default class MyDocument extends Document { + static async getInitialProps(ctx) { + const initialProps = await Document.getInitialProps(ctx); + const { renderPage } = ctx; + // for emotion-js + const page = renderPage(); + const styles = renderToString(page.html); + return { ...initialProps, ...page, ...styles }; + } + + constructor(props) { + // for emotion-js + super(props); + const { __NEXT_DATA__, ids } = props; + if (ids) { + __NEXT_DATA__.ids = ids; + } + } + + render() { + return ( + + + + + + {/* for emotion-js */} +