Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

feat: configure ssr handler to only match known routes #2705

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
orinokai wants to merge 5 commits into main
base: main
Choose a base branch
Loading
from rs/ssr-invocations
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 57 additions & 6 deletions package-lock.json
View file Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@
"semver": "^7.6.0",
"typescript": "^5.4.5",
"unionfs": "^4.5.4",
"urlpattern-polyfill": "^10.0.0",
"uuid": "^10.0.0",
"vitest": "^1.5.3"
},
Expand Down
78 changes: 77 additions & 1 deletion src/build/functions/server.ts
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,88 @@ const applyTemplateVariables = (template: string, variables: Record<string, stri
}, template)
}

// Convert Next.js route syntax to URLPattern syntax and add basePath and locales if present
const transformRoutePatterns = (
route: string,
basePath: string,
locales: string[] = [],
): string[] => {
const transformedRoute = route
.replace(/\[\[\.\.\.(\w+)]]/g, ':1ドル*') // [[...slug]] -> :slug*
.replace(/\[\.{3}(\w+)]/g, ':1ドル+') // [...slug] -> :slug+
.replace(/\[(\w+)]/g, ':1ドル') // [id] -> :id

return [
posixJoin('/', basePath, transformedRoute),
...locales.map((locale) => posixJoin('/', basePath, locale, transformedRoute)),
]
}

export const getRoutes = async (ctx: PluginContext) => {
const routesManifest = await ctx.getRoutesManifest()
const prerenderManifest = await ctx.getPrerenderManifest()

// static routes
const staticRoutes = routesManifest.staticRoutes.map((route) => route.page)

// dynamic routes (no wildcard for routes without fallback)
const dynamicRoutes = routesManifest.dynamicRoutes
.filter((route) => prerenderManifest.dynamicRoutes[route.page]?.fallback !== false)
.map((route) => route.page)
const prerenderedDynamicRoutes = Object.keys(prerenderManifest.routes)

// static Route Handler routes (App Router)
const appPathRoutesManifest = await ctx.getAppPathRoutesManifest()
const appRoutes = Object.values(appPathRoutesManifest)

// API handler routes (Page Router)
const pagesManifest = await ctx.getPagesManifest()
const pagesRoutes = Object.keys(pagesManifest).filter((route) => route.startsWith('/api'))

const transformedRoutes = [
...staticRoutes,
...dynamicRoutes,
...prerenderedDynamicRoutes,
...appRoutes,
...pagesRoutes,
].flatMap((route) =>
transformRoutePatterns(route, ctx.buildConfig.basePath, ctx.buildConfig.i18n?.locales),
)

const internalRoutes = [
'/_next/static/*',
'/_next/data/*',
'/_next/image/*',
'/_next/postponed/*',
]

// route.source conforms to the URLPattern syntax, which will work with our redirect engine
// however this will be a superset of possible routes as it does not parse the
// header/cookie/query matching that Next.js offers
const redirects = routesManifest.redirects.map((route) => route.source)
const rewrites = Array.isArray(routesManifest.rewrites)
? routesManifest.rewrites.map((route) => route.source)
: []

const uniqueRoutes = new Set([
...transformedRoutes,
...internalRoutes,
...redirects,
...rewrites,
// '/*', // retain the catch-all route for our initial testing
])

return [...uniqueRoutes]
}

/** Get's the content of the handler file that will be written to the lambda */
const getHandlerFile = async (ctx: PluginContext): Promise<string> => {
const templatesDir = join(ctx.pluginDir, 'dist/build/templates')
const routes = await getRoutes(ctx)

const templatesDir = join(ctx.pluginDir, 'dist/build/templates')
const templateVariables: Record<string, string> = {
'{{useRegionalBlobs}}': ctx.useRegionalBlobs.toString(),
'{{paths}}': routes.join("','"),
}
// In this case it is a monorepo and we need to use a own template for it
// as we have to change the process working directory
Expand Down
16 changes: 16 additions & 0 deletions src/build/plugin-context.ts
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,22 @@ export class PluginContext {
return JSON.parse(await readFile(join(this.publishDir, 'routes-manifest.json'), 'utf-8'))
}

/**
* Get Next.js app path routes manifest from the build output
*/
async getAppPathRoutesManifest(): Promise<Record<string, string>> {
return JSON.parse(
await readFile(join(this.publishDir, 'app-path-routes-manifest.json'), 'utf-8'),
)
}

/**
* Get Next.js app path routes manifest from the build output
*/
async getPagesManifest(): Promise<Record<string, string>> {
return JSON.parse(await readFile(join(this.publishDir, 'server/pages-manifest.json'), 'utf-8'))
}

#nextVersion: string | null | undefined = undefined

/**
Expand Down
2 changes: 1 addition & 1 deletion src/build/templates/handler.tmpl.js
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,6 @@ export default async function handler(req, context) {
}

export const config = {
path: '/*',
path: ['{{paths}}'],
preferStatic: true,
}
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
export async function generateStaticParams() {
return [{ id: '1' }, { id: '2' }]
}

async function getData(params) {
const res = await fetch(`https://api.tvmaze.com/shows/${params.id}`, {
next: {
tags: [`show-${params.id}`],
},
})
return res.json()
}

export default async function Page({ params }) {
const data = await getData(params)

return (
<>
<h1>Hello, Force Dynamically Rendered Server Component</h1>
<p>Paths /1 and /2 prerendered; other paths not found</p>
<dl>
<dt>Show</dt>
<dd>{data.name}</dd>
<dt>Param</dt>
<dd>{params.id}</dd>
<dt>Time</dt>
<dd data-testid="date-now">{new Date().toISOString()}</dd>
</dl>
</>
)
}

export const dynamic = 'force-dynamic'
3 changes: 2 additions & 1 deletion tests/fixtures/server-components/next-env.d.ts
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
3 changes: 3 additions & 0 deletions tests/fixtures/server-components/pages/api/okay.js
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default async function handler(req, res) {
return res.send({ code: 200, message: 'okay' })
}
4 changes: 4 additions & 0 deletions tests/fixtures/server-components/pages/api/posts/[id].js
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export default function handler(req, res) {
const { id } = req.query
res.send({ code: 200, message: `okay ${id}` })
}
11 changes: 11 additions & 0 deletions tests/fixtures/server-components/pages/dynamic.js
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export default function Yar({ title }) {
return <h1>{title}</h1>
}

export async function getServerSideProps() {
return {
props: {
title: 'My Page',
},
}
}
25 changes: 25 additions & 0 deletions tests/fixtures/server-components/pages/posts/dynamic/[id].js
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
export default function Page({ params }) {
return (
<>
<h1>Hello, Dyanmically fetched show</h1>
<dl>
<dt>Param</dt>
<dd>{params.id}</dd>
<dt>Time</dt>
<dd data-testid="date-now">{new Date().toISOString()}</dd>
</dl>
</>
)
}

export async function getServerSideProps({ params }) {
const res = await fetch(`https://api.tvmaze.com/shows/${params.id}`)
const data = await res.json()

return {
props: {
params,
data,
},
}
}
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
export default function Page({ params }) {
return (
<>
<h1>Hello, Statically fetched show</h1>
<p>Paths /1 and /2 prerendered; other paths not found</p>
<dl>
<dt>Param</dt>
<dd>{params.id}</dd>
<dt>Time</dt>
<dd data-testid="date-now">{new Date().toISOString()}</dd>
</dl>
</>
)
}

export async function getStaticPaths() {
return {
paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
fallback: false,
}
}

export async function getStaticProps({ params }) {
const res = await fetch(`https://api.tvmaze.com/shows/${params.id}`)
const data = await res.json()

return {
props: {
params,
data,
},
}
}
Loading
Loading

AltStyle によって変換されたページ (->オリジナル) /