diff --git a/examples/hello-world-ssr/app.tsx b/examples/hello-world-ssr/app.tsx new file mode 100644 index 000000000..d91d915c9 --- /dev/null +++ b/examples/hello-world-ssr/app.tsx @@ -0,0 +1,12 @@ +import React, { ComponentType } from 'react' + +export default function App({ Page, pageProps }: { Page: ComponentType, pageProps: any }) { + return ( +
+ + + + +
+ ) +} diff --git a/examples/hello-world-ssr/pages/index.tsx b/examples/hello-world-ssr/pages/index.tsx new file mode 100644 index 000000000..0e6e73e0d --- /dev/null +++ b/examples/hello-world-ssr/pages/index.tsx @@ -0,0 +1,20 @@ +import React from 'https://esm.sh/react' +import type { SSROptions } from 'https://deno.land/x/aleph/types.d.ts' + +export const ssr: SSROptions = { + props: async router => { + return { + $revalidate: 1, // revalidate props after 1 second + serverTime: Date.now() + } + }, + paths: async () => { + return [] + } +} + +export default function Page(props) { + return ( +

Now: {props.serverTime}

+ ) +} diff --git a/framework/react/bootstrap.ts b/framework/react/bootstrap.ts index 3de1d9148..749fdde11 100644 --- a/framework/react/bootstrap.ts +++ b/framework/react/bootstrap.ts @@ -19,6 +19,13 @@ export default async function bootstrap(options: BootstrapOptions) { const routing = new Routing({ routes, rewrites, basePath, defaultLocale, locales, redirect }) const [url, nestedModules] = routing.createRouter() const components = await importPageModules(url, nestedModules) + + if (renderMode === 'ssr') { + // restore ssr-data from HTML + // must be called before creating page props + loadSSRDataFromTag(url) + } + const pageRoute = createPageRoute(url, components) const routerEl = createElement(Router, { appModule, pageRoute, routing }) const mountPoint = document.getElementById('__aleph') @@ -27,7 +34,6 @@ export default async function bootstrap(options: BootstrapOptions) { if (dataRoutes) { setStaticDataRoutes(dataRoutes) } - loadSSRDataFromTag(url) hydrate(routerEl, mountPoint) } else { render(routerEl, mountPoint)