JLN Posts - Answer Overflow

JLN

Explore posts from servers

•Created by JLN on 9/24/2022 in #questions

Scroll based animations and scroll lock

What are the/your common goto solutions for doing scroll based animations aswell as locking the content and animating it while the user continues to scroll? Like on the remix page https://remix.run/ I heard about stuff like gsap scrolltrigger, sure i could intersection observer for some cases, just curious whats out there

2 replies

TTCTheo's Typesafe Cult

•Created by JLN on 9/19/2022 in #questions

Why does that work? - Runtime Config with Nextjs

(unsure about the tag, so I am just going with both, feel free to correct me on it tho) Could some please explain why this working? I am working with runtime environment variables right now. As noted in the docs of nextjs it says that the page is required to be ssr'ed in order to use the publicRuntimeConfig (https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration) My page looks like this:

const LazyComponent = dynamic(() => import('path/to/component'), {
  ssr: false
});

const Page = () => {
   ...
   <LazyComponent />
   ... 
}

// Force SSR
export const getServerSideProps = () => {}

export default Page;

const LazyComponent = dynamic(() => import('path/to/component'), {
  ssr: false
});

const Page = () => {
   ...
   <LazyComponent />
   ... 
}

// Force SSR
export const getServerSideProps = () => {}

export default Page;

The runtime enviroment variables are only needed inside the LazyComponent which is dynamically imported on the client.
Steps I went through: - Build the Project - Start the Project with some Env Vars -> works ✅ - Change Env Vars and restart the project -> works ✅ So its working like I want it to be, but I cant grasp why. Is it because during the SSR the publicRuntimeConfig gets populated and is available for all the others components? Even if they just get rendered on the client?

1 replies

Gaming

Programming