jargonfree.dev

Web dev fundamentals minus all the jargon.

[jargonfree.dev @jargonfree_dev]

static sites eat traffic spikes for breakfast. this makes them super lucrative.

but, there's a bunch of things to be careful about when using static pages to serve content:

[jargonfree.dev @jargonfree_dev]

@TiyaTwts Ok for a 10 yo to watch? Thinking if I can take my daughter to watch it.

[jargonfree.dev @jargonfree_dev]

@coderNadir @freeCodeCamp @JajaDavid8 yea, harsh reality of dev jobs.

[jargonfree.dev @jargonfree_dev]

@EthamFrancis But, isn't ssr: false disabling server-side rendering here?

[jargonfree.dev @jargonfree_dev]

@_NamHai @AristideBenoist @Anemolito @ZajnoCrew @brijanp Sorry to jump in - but in general Intersection Observer is a better choice than something like a scroll event listener.

Again - a lot less CPU intensive & as a result, lot more smooth.

[jargonfree.dev @jargonfree_dev]

@coderNadir @freeCodeCamp @JajaDavid8 What you state is legit. But, you'll hear most marketing & product managers ask for "infinite scroll" - esp for eComm & marketing sites.

[jargonfree.dev @jargonfree_dev]

to know the alternatives in such situation, check out the full explainer:

https://t.co/Jkb7M6a2IC

[jargonfree.dev @jargonfree_dev]

static sites eat traffic spikes for breakfast. this makes them super lucrative.

but, there's a bunch of things to be careful about when using static pages to serve content:

[jargonfree.dev @jargonfree_dev]

and if our content is dynamic (user / location specific), we cannot use static pages

[jargonfree.dev @jargonfree_dev]

@swedenappz got it, makes sense.

Btw, just in case if you know the aspect-ratio in advance, things would work if you can set width & aspect-ratio.

But, agree - that without knowing dimensions and having to place additional info would need JS driven solution.

[jargonfree.dev @jargonfree_dev]

@git_robo Apologies for the shameless self plug but this may be of help - https://t.co/eg8NQBFxtX

[jargonfree.dev @jargonfree_dev]

@git_robo It's a lot more secure to store the JWT as httponly cookie and then read the cookie header on the server-side for the auth.

Keeping cookie access away from browser-side JS prevents XSS attacks.

[jargonfree.dev @jargonfree_dev]

@zalimidis @murshidmuzamil bfcache works wonders, but only when navigating back / forward between pages.

For CLS issues otherwise, setting the aspect-ratio in advance or specifying image dimensions in HTML is the way out.

[jargonfree.dev @jargonfree_dev]

@june_dang0706 While Intersection Observer is a great API - native lazy loading is a lot simpler to implement solution wrt. images lazy loading.

For the rest, like you mentioned, IntersectionObserver does the job.

[jargonfree.dev @jargonfree_dev]

@swedenappz Have found both native lazy loading / intersection observer to be very reliable. what specific issue you faced when trying either of these?

[jargonfree.dev @jargonfree_dev]

@dhanieltunde I'm hoping this specific API reference graphic helps - https://t.co/8hQXpaACfP

[jargonfree.dev @jargonfree_dev]

@SarcevicAntonio You may want to compare some React frameworks (like Next, Remix) with Angular, etc?

[jargonfree.dev @jargonfree_dev]

@markozxuu 1. Hydration isn't limited to SSG but is also experienced with SSR (server-side rendered) pages.

2. React server components works for components that do not require JS (eg - blog post content) but not for those that need JS (eg - datetime picker). With RSC, there's no hydration

[jargonfree.dev @jargonfree_dev]

@jpd1738 @nextjs @vercel @googleanalytics Check out simple analytics / plausible - these have a lower impact on your site-speed & are privacy friendly analytics.

Note - they may not offer every metric that GA offers.