From 2563121e3b9e94749ec142b7255c0b5b2c7ecf96 Mon Sep 17 00:00:00 2001 From: Will Johnston Date: Mon, 11 Oct 2021 14:00:11 -0700 Subject: [PATCH 1/2] doc: (#519) adding examples for getStaticPaths (#573) --- docs/next/guides/ssr-ssg.mdx | 59 ++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/docs/next/guides/ssr-ssg.mdx b/docs/next/guides/ssr-ssg.mdx index 80a1ecceb..1812c0f18 100644 --- a/docs/next/guides/ssr-ssg.mdx +++ b/docs/next/guides/ssr-ssg.mdx @@ -56,6 +56,65 @@ The reason `MyPage` and `client` are passed to `getNextStaticProps` is because u This allows the developer to not have to think about batching/constructing queries, or data fetching. You are able to write your page as if you will be using Client-side Rendering (CSR). Then, you add the `getStaticProps` function above and can take advantage of SSG! +### How To Handle `getStaticPaths` + +Next.js supports [SSG with `getStaticPaths`](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation) as well. This function is used to build a list of paths that can be used to statically generate your site. This function should be used when you have a dynamic page that needs to be statically generated (e.g. `[postSlug].tsx`). In the `getStaticPaths` function you have the option to return the paths that you have several options that inform Next.js how you want to statically generate your pages. Consider the following examples: + +#### Statically Generate All Your Pages Upon Request + +If you don't know exactly how you want to statically generate your site, a good option for `getStaticPaths` is to inform Next.js not to generate any HTML at build time, but to generated it on-the-fly as new requests come in. You can do this as follows: + +```tsx title=src/pages/posts/[postSlug]/index.tsx +export function getStaticPaths() { + return { + paths: [], + fallback: 'blocking', + }; +} +``` + +The above code will tell Next.js not to generate any pages up front. Then, as requests come in they will be generated server-side and stored for subsequent requests. Read more about [`fallback: 'blocking'`](https://nextjs.org/docs/basic-features/data-fetching#fallback-blocking). + +#### Statically Generate **Some** Of Your Pages At Build Time Based On A Query + +Maybe you want to generate a specific set of posts during build time. Perhaps you want to generate the most recent posts, or maybe you want to generate posts that receive a lot of traffic. You can do this by providing paths to Next.js that are based on a query as follows: + +```tsx title=src/pages/posts/[postSlug]/index.tsx +import { client } from 'client'; + +export async function getStaticPaths() { + const values = await client.client.inlineResolved(() => { + return client.client.query + .posts({ + first: 5, + }) + ?.nodes?.map((node) => node?.uri); + }); + const paths = []; + + if (Array.isArray(values)) { + paths.push( + ...values + .filter((value) => { + return typeof value === 'string'; + }), + ); + } + + return { + paths, + fallback: 'blocking', + }; +``` + +> **NOTE**: The code above assumes you have your permalink structure set to `/posts/%postname%/` in WordPress. You can add additional logic here to format the proper URL if that is not the case. + +The code above will perform an inline query to WordPress in order to get the 5 most recent posts. Then it will create a list of paths based on the post URIs. In this case we are not rendering all the post pages up front, so some will be dynamically generated on-the-fly using the `fallback: 'blocking'` feature in Next.js. + + +The above scenarios are most common, but there are other options for [`getStaticPaths`](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation) that might be useful depending upon your needs. + + ## SSR Using `getNextServerSideProps` This helper function lets you server side render your page with WordPress data. The function should be returned from `getServerSideProps`: From 7be3af09cb06c9549058d5a96415fb22c6a9184f Mon Sep 17 00:00:00 2001 From: Andrew Matthews Date: Wed, 13 Oct 2021 10:53:25 -0400 Subject: [PATCH 2/2] refactor: simplify public route redirection by using template_redirect (#575) --- .../includes/deny-public-access/callbacks.php | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/plugins/wpe-headless/includes/deny-public-access/callbacks.php b/plugins/wpe-headless/includes/deny-public-access/callbacks.php index 9771a6b8a..9385af1d8 100644 --- a/plugins/wpe-headless/includes/deny-public-access/callbacks.php +++ b/plugins/wpe-headless/includes/deny-public-access/callbacks.php @@ -9,31 +9,20 @@ exit; } -add_action( 'parse_request', 'wpe_headless_deny_public_access', 99 ); +add_action( 'template_redirect', 'wpe_headless_deny_public_access', 99 ); /** * Redirects non-API requests for public URLs to the specified front-end URL. * - * @param object $query The current query. - * * @return void */ -function wpe_headless_deny_public_access( $query ) { - if ( ! wpe_headless_is_redirects_enabled() ) { +function wpe_headless_deny_public_access() { + if ( ! wpe_headless_is_redirects_enabled() || is_customize_preview() ) { return; } $frontend_uri = wpe_headless_get_setting( 'frontend_uri' ); - if ( - defined( 'DOING_CRON' ) || - defined( 'REST_REQUEST' ) || - is_admin() || - is_customize_preview() || - ( function_exists( 'is_graphql_http_request' ) && is_graphql_http_request() ) || // From https://wordpress.org/plugins/wp-graphql/. - ! empty( $query->query_vars['rest_oauth1'] ) || // From https://oauth1.wp-api.org/. - ! property_exists( $query, 'request' ) || - ! $frontend_uri - ) { + if ( ! $frontend_uri ) { return; }