Skip to content
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

Fix SPA mode when single fetch is enabled #9063

Merged
merged 3 commits into from Mar 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/single-fetch-spa-mode.md
@@ -0,0 +1,5 @@
---
"@remix-run/dev": patch
---

Fix SPA mode when single fetch is enabled by using streaming entry.server
3 changes: 2 additions & 1 deletion packages/remix-dev/cli/commands.ts
Expand Up @@ -303,7 +303,8 @@ export async function generateEntry(
let defaultEntryClient = path.resolve(defaultsDirectory, "entry.client.tsx");
let defaultEntryServer = path.resolve(
defaultsDirectory,
ctx?.remixConfig.ssr === false
ctx?.remixConfig.ssr === false &&
ctx?.remixConfig.future.unstable_singleFetch !== true
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reveal the streaming entry.server in SPA mode when single fetch is enabled.

I wonder if there's any good way to detect if a user is currently using renderToString in their own entry.server and they flip on single fetch. From what I recall the error isn't super obvious and React sticks it in a <template> at the end of the HTML but no console errors get logged.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jacob-ebey is going to look into a check at built time for this using the entry.server AST (separate PR)

? `entry.server.spa.tsx`
: `entry.server.${serverRuntime}.tsx`
);
Expand Down
2 changes: 1 addition & 1 deletion packages/remix-dev/config.ts
Expand Up @@ -469,7 +469,7 @@ export async function resolveConfig(
let pkgJson = await PackageJson.load(rootDirectory);
let deps = pkgJson.content.dependencies ?? {};

if (isSpaMode) {
if (isSpaMode && appConfig.future?.unstable_singleFetch != true) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Default to the streaming entry server in SPA mode w/singleFetch if the user doesn't have an entry.server

// This is a super-simple default since we don't need streaming in SPA Mode.
// We can include this in a remix-spa template, but right now `npx remix reveal`
// will still expose the streaming template since that command doesn't have
Expand Down
5 changes: 4 additions & 1 deletion packages/remix-dev/config/defaults/entry.server.node.tsx
Expand Up @@ -15,7 +15,10 @@ export default function handleRequest(
remixContext: EntryContext,
loadContext: AppLoadContext
) {
return isBotRequest(request.headers.get("user-agent"))
let prohibitOutOfOrderStreaming =
isBotRequest(request.headers.get("user-agent")) || remixContext.isSpaMode;

return prohibitOutOfOrderStreaming
? handleBotRequest(
request,
responseStatusCode,
Expand Down
6 changes: 6 additions & 0 deletions templates/spa/app/entry.client.tsx
@@ -1,3 +1,9 @@
/**
* By default, Remix will handle hydrating your app on the client 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.client
*/

import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
Expand Down
19 changes: 0 additions & 19 deletions templates/spa/app/entry.server.tsx

This file was deleted.