Comments (6)
Sometimes its perf reason (loading when its needed), sometimes its just a must.
I struggle to implement Leaflet maps in Remix now, I definitely need something like next's dynamic() or react lazy, otherwise its hacking. Some libraries are unsafely trying to access DOM...
from remix.
You can currently do Client Only dynamic component imports with the following pattern:
import { Suspense, lazy, useEffect, useState } from "react";
import type { ReactNode } from "react";
let LazyImported = lazy(() => import("./lazy-comp"));
export function ClientOnly({ children }: { children: ReactNode }) {
let [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
return mounted ? <>{children}</> : null;
}
export default RouteComponent() {
return (
<h1>YAY!</h1>
<ClientOnly>
<Suspense fallback="">
<LazyImported />
</Suspense>
</ClientOnly>
);
}
from remix.
Thanks @jacob-ebey , it work indeed, but its a hacky way. I assume it will be gone when React 18 and SSR suspense is shipped.
What is worth to mention IMO is
- Add this to the documentation. There are plenty of examples how to do it in Next and Remix is sort of more high level Next alternative. I think problems with SSR/hydration is one of the biggest challenges for devs
- Dynamic imports require TS to set a valid module flag in tsconfig. For me it works with
es2022
but I can't be sure if I'm not breaking Remix internal builds right now
Regarding initial issue by Ryan, my opinion is to use native React way (lazy and suspense) without re-exporting it, but ensure internal build system is configured well to support it
from remix.
Dynamic imports require TS to set a valid module flag in tsconfig
Dynamic imports seem to work just fine with "module": "es6" in tsconfig even though TS complains about the availability.
Older browsers probably break entirely but that's to be expected with ES6. Changing module to something else is bound to break newish browsers, like Safari from last "good' MacOS version, so that isn't really an option?
Would be nice if there was some sort of official guidance on the subject. I was able to implement a lazy loading admin overlay, but I'm a bit afraid for it's longevity.
from remix.
tsconfig isn't really used and there's nothing you configure there that will break how remix complies your code currently. Don't worry about changing it, especially when it's to include a config for language settings you are trying to use such as dynamic import. Anything you can do today such as putting suspense behind a client only won't break in the future as react is only adding the ability for the server to use this, not removing anything. Don't worry about "longevity" in terms of things breaking around the pattern I've outlined above. And I wouldn't call it hacky, it's literally how you delay execution for client only using state in React. Nothing strange about it.
As for a "dynamic" component, React.lazy will essentially become this when 18 drops, but I'm skeptical about implementing it today as every version of it will be a combo of the compiler turning async imports into sync imports for the server, and "hacks" for the client around delaying hydration until these chunks have loaded to avoid hydration issues. This means we'd have to expose some sort of "waitTillDynamicHasLoaded()" you have to call in your entry.client, or hide this away very hacky under the hood. I don't think this is worth it currently.
from remix.
Thanks for the clarification! I can get rid of // @ts-expect-error
comments by just switching the module flag. I had gotten a bit of misinformation from somewhere, thinking things would break in the future.
from remix.
Related Issues (20)
- Hydration Errors When Deferred Promise Rejects HOT 1
- useFetcher return type is `any` since upgrading to remix 2.9.0 HOT 2
- redirect with 307 does not work as expected HOT 5
- install.js.map hook HOT 3
- 2.9.1: useFetcher/useLoaderData types are set to never HOT 8
- Single fetch `response` parameter for loader is undefined if no default export exists in the route HOT 6
- useLoaderData<typeof loader> returns type JsonifyObject<T> rather than T HOT 6
- Single Fetch Issues HOT 8
- Single Fetch: bad behavior in promises that resolve to `undefined` and `null` HOT 2
- Single fetch: loader type us unknown HOT 6
- Single Fetch: missing type for useLoaderData<typeof clientLoader>() HOT 3
- Application crashes on unhandled promise rejection in deferred data HOT 5
- [VitePlugin] HMR breaks with imagetools transformer Vite plugin HOT 1
- Testing utilities have wrong types for meta functions HOT 1
- remix-express/server throws error on IPv6 host or X-Forwarded-Host HOT 3
- `remix dev` fails when workspace has a deprecated node-builtin in unrelated package
- Re: `@remix-run/serve` sets high `max-age` and `immutable` cache header on everything HOT 2
- Action submission triggers a loader re-validation ignoring its `shouldRevalidate` export.
- Single fetch: thrown response stub passed to `handleError`
- Single fetch: allow setting a `nonce` on `StreamTransfer`'s `script` tags HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from remix.