diff --git a/internal/website/docs/next/ssr-ssg.mdx b/internal/website/docs/next/ssr-ssg.mdx deleted file mode 100644 index 468692d93..000000000 --- a/internal/website/docs/next/ssr-ssg.mdx +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: next-ssr-ssg -slug: ssr-ssg -title: SSR & SSG -sidebar_position: 3 ---- - -# SSR & SSG - -Server-Side Rendering and Static Site Generation are both accomplished in the framework by using either `getNextStaticProps` or `getNextServerSideProps`. - -## `getNextStaticProps` - -This helper function lets you build a static site with your WordPress data. The function should be returned from `getStaticProps`: - -```tsx -export async function getStaticProps(context: GetStaticPropsContext) { - return getNextStaticProps(context, { - Page: MyPage, - }); -} -``` - -The function accepts two arguments: the static props context, and an object with a `Page` key. This should be your Next.js page component: - -```tsx {2,4,19} -import { GetStaticPropsContext } from 'next'; -import { client, getNextStaticProps } from '@wpengine/headless-next'; - -export default function MyPage() { - const { usePosts } = client(); - - return ( - <> -

Recent Posts

- {usePosts()?.nodes.map((post) => ( -
  • {post.title()}
  • - ))} - - ); -} - -export async function getStaticProps(context: GetStaticPropsContext) { - return getNextStaticProps(context, { - Page: MyPage, - }); -} -``` - -The reason `MyPage` is passed to `getNextStaticProps` is because under the hood we do a skeleton render of the page component to know what data to fetch/what queries to build. This allows the developer to not have to think about batching/constructing queries, or data fetching. - -## `getNextServerSideProps` - -This helper function lets you server side render your WordPress data. The function should be returned from `getServerSideProps`: - -```tsx -export async function getServerSideProps(context: GetServerSidePropsContext) { - return getNextServerSideProps(context, { - Page: MyPage, - }); -} -``` - -The function accepts two arguments: the server side props context, and an object with a `Page` key. This should be your Next.js page component: - -```tsx {2,4,19} -import { GetServerSidePropsContext } from 'next'; -import { client, getNextStaticProps } from '@wpengine/headless-next'; - -export default function MyPage() { - const { usePosts } = client(); - - return ( - <> -

    Recent Posts

    - {usePosts()?.nodes.map((post) => ( -
  • {post.title()}
  • - ))} - - ); -} - -export async function getServerSideProps(context: GetServerSidePropsContext) { - return getNextServerSideProps(context, { - Page: MyPage, - }); -} -``` - -As mentioned in `getNextStaticProps`, the reason `MyPage` is passed to `getNextServerSideProps` is because under the hood we do a skeleton render of the page component to know what data to fetch/what queries to build. This allows the developer to not have to think about batching/constructing queries, or data fetching. - -## Helper Functions - -### `is404` - -```tsx title="src/pages/posts/[postSlug].tsx" -import { getNextStaticProps, client, is404 } from '@wpengine/headless-next'; - -export default function MyPage() { - return( - ... - ) -} - -export async function getStaticProps(context: GetStaticPropsContext) { - if (await is404(context)) { - return { - notFound: true, - }; - } - - return getNextStaticProps(context, { - Page, - }); -} -``` \ No newline at end of file diff --git a/internal/website/package-lock.json b/internal/website/package-lock.json index c1436d534..9f6f8537c 100644 --- a/internal/website/package-lock.json +++ b/internal/website/package-lock.json @@ -19,6 +19,22 @@ "url-loader": "^4.1.1" } }, + "../..": { + "name": "root", + "extraneous": true, + "devDependencies": { + "@wordpress/env": "^4.0.0", + "rimraf": "^3.0.2" + }, + "workspaces": { + "packages": [ + "packages/core", + "packages/react", + "packages/next", + "examples/next/getting-started" + ] + } + }, "node_modules/@algolia/autocomplete-core": { "version": "1.0.0-alpha.44", "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.0.0-alpha.44.tgz", diff --git a/internal/website/package.json b/internal/website/package.json index 8c95eb7b4..e62f39062 100644 --- a/internal/website/package.json +++ b/internal/website/package.json @@ -37,4 +37,4 @@ "last 1 safari version" ] } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 0becf6460..2abd20c80 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,10 @@ "lint:fix": "npm run lint:fix --workspace=@faustjs/core --workspace=@faustjs/react --workspace=@faustjs/next", "dev": "npm run build && npm run dev:next:getting-started", "dev:next:getting-started": "npm run dev ---workspace=examples/next/getting-started", + "docs": "npm start --prefix internal/website", + "docs:build": "npm run build --prefix internal/website", + "docs:install": "cd internal/website && npm i && cd ..", + "docs:start": "npm start --prefix internal/website", "test": "npm test --workspace=@faustjs/core --workspace=@faustjs/react --workspace=@faustjs/next", "minor": "npm version minor --git-tag-version=false --workspace=@faustjs/core --workspace=@faustjs/react --workspace=@faustjs/next", "patch": "npm version patch --git-tag-version=false --workspace=@faustjs/core --workspace=@faustjs/react --workspace=@faustjs/next",