Comments (2)
You can make this as follows. It would be great if you contribute a cookbook entry that explains this in a way that others at your company and elsewhere understand it easily.
The idea is that during SSR, you store certain data that never changes at the root level, and since root never rerenders, it will never need to be loaded again on the client.
- Define a
getClient()
function that reads the data from disk - Make something like this
export const clientCtx = createContextId<Signal<ClientConfig>>('c')
export const useClientProvider = () => {
const loc = useLocation()
const clientS = useSignal<ClientConfig>({theme: {}} as ClientConfig)
useContextProvider(clientCtx, clientS)
useTask$(async () => {
console.log('get client')
clientS.value = await getClient(loc.url.hostname)
console.log('got client')
})
}
const o = c => console.log(c) || c
// Note, this removes reactivity but the value is static so it's fine
export const useClient = () => o(useContext(clientCtx).value)
- In your root layout, add
useClientProvider()
- Anywhere you need the data, add
const client = useClient()
If you need to use the client info in some server function, use the getClient function. You can also cache the result in module scope.
from qwik.
in entry.ssr.ts you can also pass props to <Root yourProps={yourData}>
then in root.tsx you can set the props to any context you need
you can grab the request object in entry.ssr.ts and if you want something to run before that use a [email protected]
const url opt.serverData?.url;
const requestEvent = opts.serverData?.qwikcity?.ev;
const sharedMap = opts.serverData?.qwikcity?.ev?.sharedMap;
from qwik.
Related Issues (20)
- [✅] fixes for all "Error: Missing Qwik City Env Data" HOT 2
- [🐞] Non-deterministic builds
- [📖] onLoad$ img cookbook
- [🐞] SSG ignoring the index page when trailingSlash is false HOT 3
- [🐞] Disable Link prefetch true by default HOT 2
- [📖] Sidebar Issue HOT 2
- [✨] How to distinguish between link preload and page visit HOT 1
- [🐞] Qwik dev server fails when using mkcert/https because of http2 headers HOT 1
- [📖] Copy the current Qwik docs homepage
- [✨] Throw server$ errors with a specific status code HOT 4
- [🐞] Attribute re-render on spread in polymorphism does not work correctly HOT 1
- [🐞] Route is broken with deep nesting HOT 2
- [✨] Automatic simple 404 responses for file requests HOT 9
- [✨] Create a unique file name for each version of service-worker.js HOT 16
- [🐞] Error Boundary Issue
- [🐞] Qwik server$ throws 500 error [Firebase deployment] HOT 2
- [🐞] Qwik Auth is not getting published HOT 2
- Link is broken [📖] HOT 6
- [📖] check all links in docs to make sure they work
- [📖] explain uncontrolled vs controlled components HOT 5
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 qwik.