i18nの設定を追加しました。

entry.server.tsxファイルを大幅に変更しています。
hackdays-io · Dec 11, 2024 · 3a54c79 · 3a54c79
1 parent 3ad9aed
commit 3a54c79
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 23 deletions.
diff --git a/pkgs/frontend/app/i18n.ts → pkgs/frontend/app/config/i18n.ts b/pkgs/frontend/app/i18n.ts → pkgs/frontend/app/config/i18n.ts
diff --git a/pkgs/frontend/app/i18next.server.ts → pkgs/frontend/app/config/i18next.server.ts b/pkgs/frontend/app/i18next.server.ts → pkgs/frontend/app/config/i18next.server.ts
@@ -1,7 +1,7 @@
 import Backend from "i18next-fs-backend";
 import { resolve } from "node:path";
 import { RemixI18Next } from "remix-i18next/server";
-import i18n from "~/i18n"; // your i18n configuration file
+import i18n from "~/config/i18n"; // your i18n configuration file
 
 /**
  * This is the i18next instance that will be used to translate messages server-side

diff --git a/pkgs/frontend/app/entry.client.tsx b/pkgs/frontend/app/entry.client.tsx
@@ -7,8 +7,8 @@ import { hydrateRoot } from "react-dom/client";
 import { I18nextProvider, initReactI18next } from "react-i18next";
 import { getInitialNamespaces } from "remix-i18next/client";
 import { ChakraProvider } from "./components/chakra-provider";
+import i18n from "./config/i18n";
 import { ClientCacheProvider } from "./emotion/emotion-client";
-import i18n from "./i18n";
 
 const hydrate = async () => {
   await i18next
@@ -54,3 +54,11 @@ if (typeof requestIdleCallback === "function") {
   // https://caniuse.com/requestidlecallback
   setTimeout(hydrate, 1);
 }
+
+if (window.requestIdleCallback) {
+  window.requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  window.setTimeout(hydrate, 1);
+}
diff --git a/pkgs/frontend/app/entry.server.tsx b/pkgs/frontend/app/entry.server.tsx
@@ -1,22 +1,33 @@
-import type { EntryContext } from "@remix-run/node";
+import {
+  createReadableStreamFromReadable,
+  type EntryContext,
+} from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import { createInstance } from "i18next";
 import Backend from "i18next-fs-backend";
+import { isbot } from "isbot";
 import { resolve } from "node:path";
+import { renderToPipeableStream } from "react-dom/server";
 import { I18nextProvider, initReactI18next } from "react-i18next";
-import { createEmotion } from "./emotion/emotion-server";
-import i18n from "./i18n";
-import i18next from "./i18next.server";
+import { PassThrough } from "stream";
+import i18n from "./config/i18n";
+import i18next from "./config/i18next.server";
+
+const ABORT_DELAY = 5000;
 
 const handleRequest = async (
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext
 ) => {
+  const callbackName = isbot(request.headers.get("user-agent"))
+    ? "onAllReady"
+    : "onShellReady";
+
   const instance = createInstance();
   const lng = await i18next.getLocale(request);
-  const ns = i18next.getRouteNamespaces(remixContext as any);
+  const ns = i18next.getRouteNamespaces(remixContext);
 
   await instance
     .use(initReactI18next) // Tell our instance to use react-i18next
@@ -28,23 +39,39 @@ const handleRequest = async (
       backend: { loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json") },
     });
 
-  new Promise((resolve) => {
-    const { renderToString, injectStyles } = createEmotion();
+  return new Promise((resolve, reject) => {
+    let didError = false;
 
-    const html = renderToString(
+    const { pipe, abort } = renderToPipeableStream(
       <I18nextProvider i18n={instance}>
         <RemixServer context={remixContext} url={request.url} />
-      </I18nextProvider>
-    );
+      </I18nextProvider>,
+      {
+        [callbackName]: () => {
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+          responseHeaders.set("Content-Type", "text/html");
 
-    responseHeaders.set("Content-Type", "text/html");
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: didError ? 500 : responseStatusCode,
+            })
+          );
 
-    const response = new Response(`<!DOCTYPE html>${injectStyles(html)}`, {
-      status: responseStatusCode,
-      headers: responseHeaders,
-    });
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          didError = true;
 
-    resolve(response);
+          console.error(error);
+        },
+      }
+    );
+    setTimeout(abort, ABORT_DELAY);
   });
 };
 

diff --git a/pkgs/frontend/app/root.tsx b/pkgs/frontend/app/root.tsx
@@ -14,7 +14,7 @@ import { PrivyProvider } from "@privy-io/react-auth";
 import { LoaderFunctionArgs } from "@remix-run/node";
 import { useTranslation } from "react-i18next";
 import { useChangeLanguage } from "remix-i18next/react";
-import i18next from "~/i18next.server";
+import i18next from "~/config/i18next.server";
 import { ChakraProvider } from "./components/chakra-provider";
 import { Header } from "./components/Header";
 import { useInjectStyles } from "./emotion/emotion-client";

diff --git a/pkgs/frontend/app/routes/_index.tsx b/pkgs/frontend/app/routes/_index.tsx
@@ -1,16 +1,16 @@
 import { Box, Input } from "@chakra-ui/react";
 import type { MetaFunction } from "@remix-run/node";
-import { CommonButton } from "~/components/common/CommonButton";
 import { useBigBang } from "hooks/useBigBang";
 import {
-  useUploadMetadataToIpfs,
   useUploadImageFileToIpfs,
+  useUploadMetadataToIpfs,
 } from "hooks/useIpfs";
+import { CommonButton } from "~/components/common/CommonButton";
 
 export const meta: MetaFunction = () => {
   return [
-    { title: "New Remix App" },
-    { name: "description", content: "Welcome to Remix!" },
+    { title: "Toban" },
+    { name: "description", content: "Welcome to Toban!" },
   ];
 };
 

diff --git a/pkgs/frontend/public/favicon.ico b/pkgs/frontend/public/favicon.ico