Merge pull request #28 from takeokunn/use-ssr

サイトに SSR を利用する

packages/web/app/entry.server.tsx

@@ -0,0 +1,43 @@
+/**
+ * By default, Remix will handle generating the HTTP Response for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.server
+ */
+
+import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
+import { RemixServer } from "@remix-run/react";
+import { isbot } from "isbot";
+import { renderToReadableStream } from "react-dom/server";
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+  // This is ignored so we can keep it in the template for visibility.  Feel
+  // free to delete this parameter in your app if you're not using it!
+  loadContext: AppLoadContext,
+) {
+  const body = await renderToReadableStream(
+    <RemixServer context={remixContext} url={request.url} />,
+    {
+      signal: request.signal,
+      onError(error: unknown) {
+        // Log streaming rendering errors from inside the shell
+        console.error(error);
+        // biome-ignore lint/style/noParameterAssign: 自動生成されたコードのため
+        responseStatusCode = 500;
+      },
+    },
+  );
+
+  if (isbot(request.headers.get("user-agent") || "")) {
+    await body.allReady;
+  }
+
+  responseHeaders.set("Content-Type", "text/html");
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}

packages/web/app/root.tsx

@@ -5,6 +5,7 @@ import {
   Scripts,
   ScrollRestoration,
   useNavigate,
+  useRouteLoaderData,
 } from "@remix-run/react";
 import {
   MantineProvider,
@@ -21,10 +22,10 @@ import {
 } from "@mantine/core";
 import "@mantine/core/styles.css";
 import { useDisclosure, useHeadroom, useMediaQuery } from "@mantine/hooks";
-import { useAwesomeYasunori } from "./hooks/use-awesome-yasunori";
+import type { IndexLoader } from "./routes/_index/loader";
 
 export function Layout({ children }: { children: React.ReactNode }) {
-  const { data } = useAwesomeYasunori();
+  const data = useRouteLoaderData<IndexLoader>("routes/_index");
   const isMobile = useMediaQuery(`(max-width: ${em(767)})`);
   const pinned = useHeadroom({ fixedAt: 120 });
   const [opened, { toggle, close }] = useDisclosure();

packages/web/app/routes/_index/loader.ts

@@ -0,0 +1,24 @@
+import type { LoaderFunction } from "@remix-run/node";
+
+export const indexLoader = (async () => {
+  const res = await fetch("https://api.yasunori.dev/awesome");
+  if (res.ok) {
+    const json =
+      await res.json<
+        {
+          id: number;
+          title: string;
+          content: string;
+          date: string;
+          at: string;
+          senpan: string;
+          meta: string;
+        }[]
+      >();
+
+    return json;
+  }
+  return null;
+}) satisfies LoaderFunction;
+
+export type IndexLoader = typeof indexLoader;

packages/web/app/routes/_index.tsx → packages/web/app/routes/_index/route.tsx

@@ -1,9 +1,12 @@
 import { Stack, Title, Card, Paper, Badge, Group } from "@mantine/core";
-import { useAwesomeYasunori } from "../hooks/use-awesome-yasunori";
 import type { MetaFunction } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import remarkBreaks from "remark-breaks";
+import { indexLoader, type IndexLoader } from "./loader";
 
+export const loader = indexLoader;
 export const meta: MetaFunction = () => {
   return [
     { title: "Awesome yasunori web" },
@@ -12,7 +15,7 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
-  const { data } = useAwesomeYasunori();
+  const data = useLoaderData<IndexLoader>();
   return (
     <Stack gap="lg">
       {data?.map((d) => (
@@ -36,7 +39,9 @@ export default function Index() {
             </Group>
           </Stack>
           <Paper p="md">
-            <Markdown remarkPlugins={[remarkGfm]}>{d.content}</Markdown>
+            <Markdown remarkPlugins={[remarkBreaks, remarkGfm]}>
+              {d.content}
+            </Markdown>
           </Paper>
         </Card>
       ))}

packages/web/functions/[[path]].ts

@@ -0,0 +1,8 @@
+import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - the server build file is generated by `remix vite:build`
+// eslint-disable-next-line import/no-unresolved
+import * as build from "../build/server";
+
+export const onRequest = createPagesFunctionHandler({ build });

packages/web/load-context.ts

@@ -0,0 +1,17 @@
+import type { PlatformProxy } from "wrangler";
+
+// When using `wrangler.toml` to configure bindings,
+// `wrangler types` will generate types for those bindings
+// into the global `Env` interface.
+// Need this empty interface so that typechecking passes
+// even if no `wrangler.toml` exists.
+// biome-ignore lint/suspicious/noEmptyInterface: <explanation>
+interface Env {}
+
+type Cloudflare = Omit<PlatformProxy<Env>, "dispose">;
+
+declare module "@remix-run/cloudflare" {
+  interface AppLoadContext {
+    cloudflare: Cloudflare;
+  }
+}

packages/web/package.json

@@ -9,24 +9,29 @@
     "build": "remix vite:build",
     "dev": "remix vite:dev",
     "lint": "pnpm biome lint .",
-    "preview": "vite preview",
+    "start": "wrangler pages dev ./build/client",
     "deploy": "pnpm run build && wrangler pages deploy",
     "typecheck": "tsc",
+    "typegen": "wrangler types",
     "format": "biome format --write ."
   },
   "dependencies": {
     "@mantine/core": "^7.13.1",
     "@mantine/hooks": "^7.13.1",
+    "@remix-run/cloudflare": "^2.12.1",
+    "@remix-run/cloudflare-pages": "^2.12.1",
     "@remix-run/node": "^2.12.1",
     "@remix-run/react": "^2.12.1",
+    "isbot": "^5.1.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",
-    "remark-gfm": "^4.0.0",
-    "swr": "^2.2.5"
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.2",
+    "@cloudflare/workers-types": "^4.20240925.0",
     "@remix-run/dev": "^2.12.1",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",