Add helper to detect client-fetch vs. full-page-load? #311
Replies: 1 comment 3 replies
-
|
You can use fetchDest to detect that. import { fetchDest } from "remix-utils/sec-fetch";
export async function action({ request }: ActionFunctionArgs) {
let data = await getDataSomehow();
// if the request was made with JS, we can just return json
if (fetchDest(request) === "empty") return json(data);
// otherwise we redirect to avoid a reload to trigger a new submission
return redirect(destination);
}The return value of This is safer than using the Accept header because the Sec-Fetch-Dest header can't be customized, is set by the browser, while you could do fetch("/url?_data=ROUTE_ID", {
headers: { accept: "text/html" }
})Remix ignores the accept header and use the |
Beta Was this translation helpful? Give feedback.
-
|
So Interesting! I'll switch to cheking the What I'm after is a clear/readable/developer-friendly way to detect SSR requests, to address the problem that That's why I asked if you'd consider adding it. Knowing to use This has been my obsession (remix-run/remix#5583) for a full year now. :-) |
Beta Was this translation helpful? Give feedback.
-
|
Detecting if a request is a document request (SSR) is not reliable to know if the user has JS disabled, because the first time someone opens a page it always be a document request. If you want to know if the user has JS enable you could add a tag that renders inside a meta tag to reload the page adding a search param. <noscript>
<meta http-equiv="refresh" content="0; url=https://example.com/?noJS">
</noscript>Then check in your loader if the request URL has that search param and set a cookie for future navigations. // app/modules/no-js.ts
import { createCookie } from "@remix-run/cloudflare";
export class NoJS {
#cookie = createCookie("no-js", {
path: "/",
sameSite: "lax",
secure: process.env.NODE_ENV === "production",
});
async validate(request: Request) {
let { searchParams } = new URL(request.url);
let noJS = searchParams.has("no-js");
if (noJS) return true;
noJS = await this.#cookie.parse(request.headers.get("cookie"));
if (noJS) return true;
return false;
}
async save(noJS: boolean, headers = new Headers()) {
headers.append("set-cookie", await this.#cookie.serialize(noJS));
return headers;
}
}
// app/root.tsx
export async function loader({ request }: LoaderFunctionArgs) {
let noJS = await new NoJS().validate(request);
let headers = await new NoJS().save(noJS);
let data = getData()
if (noJS) {
return json({ data: await data, noJS, url: request.url }, { headers })
}
return defer({ data, noJS, url: request.url })
}
export default function Component() {
let { noJS, url } = useLoaderData<typeof loader>()
let noJSURL = new URL(url)
noJSURL.searchParams.set("no-js", "1")
return (
<html>
// more things here
<body>
{noJS ? null : (
<noscript>
<meta httpEquiv="refresh" content={`0; url=${noJSURL.toString()}`} />
</noscript>
)}
// content here
</body>
</html>
)
}Remember that now you will need to handle that |
Beta Was this translation helpful? Give feedback.
-
|
For this I'm not focused on detecting if JS is enabled as much as what type of request this is. I was merely pointing out that deferred/streaming HTML responses inherently break the principle of progressive enhancement. But yes that can be worked around (at least for requests where http-equive refresh meta tags are processed). The |
Beta Was this translation helpful? Give feedback.
-
Hi @sergiodxa. Would you be open to accepting a PR for a helper function that answers the question whether a loader/action is running because of a scripted fetch navigation/submit action or is caused by a normal page load (initial browser request, reload button or
curlcommand)?What I'm thinking of is something like this:
Beta Was this translation helpful? Give feedback.
All reactions