<table id="gooku"><pre id="gooku"></pre></table>
tag. <\/p>\n\n

That’s not the same as PHP, but it’s also not the same as real SSR. <\/p>\n\n\n


\n\n

\n \n \n The Early Days\n<\/h2>\n\n

Early on, React apps were “pre-rendered” using headless Chrome to save them as HTML strings. That snapshot went into a CDN. Technically, a server wasn’t even necessary to make this work. ? <\/p>\n\n

It was a pointless endeavor, but Google recommended it for SEO at one point. I tracked down that article once, but I’m not sure if I can find it again. <\/p>\n\n\n


\n\n

\n \n \n Why Care About This?\n<\/h2>\n\n

React Server Components (RSC) forced us to revisit this topic. <\/p>\n\n

Technically, RSC doesn’t do SSR. This surprised a lot of people. <\/p>\n\n

The React team tried explaining it but gave up. The gist is that server components are just templates—they produce static HTML. Client components go through SSR to produce both HTML and DOM. <\/p>\n\n\n


\n\n

\n \n \n Inertia.js and SSR\n<\/h2>\n\n

Inertia.js makes a similar distinction. PHP runs on the server, but your JavaScript app gets SSR’d by running on the server to produce HTML and then hydrating on the client. <\/p>\n\n\n


\n\n

\n \n \n So, Can PHP Do SSR?\n<\/h2>\n\n

No. Like RSC, PHP is doing dynamic scripting (SR)<\/strong> with a step that does SSR. <\/p>\n\n

If you run a React app with a middleware like Hono, injecting some dynamic code into HTML and later calling renderToString, it feels similar. In both cases, it’s SR with a step of SSR. <\/p>\n\n

That’s why it’s bonkers when people claim, “We did SSR in PHP in the ’90s.” <\/p>\n\n\n


\n\n

\n \n \n What About SSG?\n<\/h2>\n\n

Every time I bring this up, someone asks about SSG. I don’t care. <\/p>\n\n

The term Static Site Generation (SSG)<\/strong> actually predated React. SSG means producing HTML—no rendering or hydration required. Did you produce HTML? Congrats, you’re doing SSG. <\/p>\n\n\n


\n\n

\n \n \n The React Innovation\n<\/h2>\n\n

React frameworks introduced isomorphic apps<\/strong>, using hydration to adopt HTML on the client without re-creating it. <\/p>\n\n

That HTML had to be produced by SSR. <\/p>\n\n\n


\n\n

\n \n \n Qwik and “Resumability”\n<\/h2>\n\n

Does Qwik do hydration? That’s the big question. <\/p>\n

Qwik developers say no, but I’m leaning towards yes. If you like Qwik, you’d need to chop off another piece of SSR and call it Resumability<\/strong>. <\/p>\n\n\n


\n\n

If you prefer listening to discussions over reading, you can hear more of these arguments in audio form from this podcast episode about React Server Components in Go<\/p>\n\n\n \n\n \n "}

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Home Web Front-end JS Tutorial What Most People Get Wrong About the Term SSR

What Most People Get Wrong About the Term SSR

Dec 02, 2024 am 08:07 AM

The term Server-Side Rendering (SSR) is often misunderstood, with many using it to describe practices that predate its creation or don’t technically qualify. From PHP templates to React’s isomorphic apps, the definition of SSR has evolved—and so has the confusion around it.

This article dives into the origins of SSR, what it truly means, and why understanding the distinction matters in modern web development.

So Here’s the Deal

We didn’t have SSR back in the PHP days. That term didn’t exist. It was created in the 2010s. No one called this stuff SSR before that.

What did they call it? If you believe Wikipedia, it was called server-side scripting (as opposed to client-side scripting).

Fun fact: if you check Wikipedia, they didn’t even add “SSR” to the server-side scripting article until 2021. Here’s the diff. And honestly? I think this is wrong.


Before SSR, There Was...

Until React introduced the term “rendering,” we didn’t use that word. The closest thing we had was server-side templates. Here’s an old snapshot.

The idea was simple: you’d use a static site generator or server scripting to build your dynamic web page.

Some people argue: “Well, if I use server templates, I’m rendering them on the server.”


The Problem With That

Rendering in React doesn’t always mean producing HTML or DOM. It produces VDOM (virtual DOM). The lines blur when you call renderToString because then the component is actually rendered to HTML.

This is why people started claiming their PHP apps were doing SSR. But here’s the issue: this loses the distinction between actual SSR and regular dynamic scripting.


The Main Difference

You can only do SSR on parts that could also be rendered on the client.

For example:

const App = () => <div onClick={handleClick}>Hello</div>;

You can run this app twice: once on the server and once on the client.

But:

<div><?php echo "Hello"; ?></div>

This can’t run on the client. There’s no rendering here—no “client-side” or “server-side” distinction. This is just old-fashioned dynamic scripting.


SR vs. SSR

What Most People Get Wrong About the Term SSR

Since no one uses those old terms anymore (except maybe in ASP), I think I’m giving up and just calling it Server Rendering (SR) vs. Server-Side Rendering (SSR).

One huge difference is hydration.

In the PHP world, there’s no hydration, but they’re still sure they have SSR. That doesn’t make sense. You can only have SSR if you have hydration.


Hydration: The Key

React has two key methods:

  • renderToStaticMarkup: Produces HTML you’re not expected to hydrate. This is closer to server templating.
  • renderToString: Produces HTML that gets hydrated on the client. This is SSR.

Angular Universal didn’t have SSR until 2023. What they had was SR: producing HTML on the server, then dropping it once scripts loaded and rendering the app as an SPA into an empty tag.

That’s not the same as PHP, but it’s also not the same as real SSR.


The Early Days

Early on, React apps were “pre-rendered” using headless Chrome to save them as HTML strings. That snapshot went into a CDN. Technically, a server wasn’t even necessary to make this work. ?

It was a pointless endeavor, but Google recommended it for SEO at one point. I tracked down that article once, but I’m not sure if I can find it again.


Why Care About This?

React Server Components (RSC) forced us to revisit this topic.

Technically, RSC doesn’t do SSR. This surprised a lot of people.

The React team tried explaining it but gave up. The gist is that server components are just templates—they produce static HTML. Client components go through SSR to produce both HTML and DOM.


Inertia.js and SSR

Inertia.js makes a similar distinction. PHP runs on the server, but your JavaScript app gets SSR’d by running on the server to produce HTML and then hydrating on the client.


So, Can PHP Do SSR?

No. Like RSC, PHP is doing dynamic scripting (SR) with a step that does SSR.

If you run a React app with a middleware like Hono, injecting some dynamic code into HTML and later calling renderToString, it feels similar. In both cases, it’s SR with a step of SSR.

That’s why it’s bonkers when people claim, “We did SSR in PHP in the ’90s.”


What About SSG?

Every time I bring this up, someone asks about SSG. I don’t care.

The term Static Site Generation (SSG) actually predated React. SSG means producing HTML—no rendering or hydration required. Did you produce HTML? Congrats, you’re doing SSG.


The React Innovation

React frameworks introduced isomorphic apps, using hydration to adopt HTML on the client without re-creating it.

That HTML had to be produced by SSR.


Qwik and “Resumability”

Does Qwik do hydration? That’s the big question.

Qwik developers say no, but I’m leaning towards yes. If you like Qwik, you’d need to chop off another piece of SSR and call it Resumability.


If you prefer listening to discussions over reading, you can hear more of these arguments in audio form from this podcast episode about React Server Components in Go

The above is the detailed content of What Most People Get Wrong About the Term SSR. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Java vs. JavaScript: Clearing Up the Confusion Java vs. JavaScript: Clearing Up the Confusion Jun 20, 2025 am 12:27 AM

Java and JavaScript are different programming languages, each suitable for different application scenarios. Java is used for large enterprise and mobile application development, while JavaScript is mainly used for web page development.

Javascript Comments: short explanation Javascript Comments: short explanation Jun 19, 2025 am 12:40 AM

JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic

How to work with dates and times in js? How to work with dates and times in js? Jul 01, 2025 am 01:27 AM

The following points should be noted when processing dates and time in JavaScript: 1. There are many ways to create Date objects. It is recommended to use ISO format strings to ensure compatibility; 2. Get and set time information can be obtained and set methods, and note that the month starts from 0; 3. Manually formatting dates requires strings, and third-party libraries can also be used; 4. It is recommended to use libraries that support time zones, such as Luxon. Mastering these key points can effectively avoid common mistakes.

Why should you place  tags at the bottom of the ? Why should you place tags at the bottom of the ? Jul 02, 2025 am 01:22 AM

PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl

JavaScript vs. Java: A Comprehensive Comparison for Developers JavaScript vs. Java: A Comprehensive Comparison for Developers Jun 20, 2025 am 12:21 AM

JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor

JavaScript: Exploring Data Types for Efficient Coding JavaScript: Exploring Data Types for Efficient Coding Jun 20, 2025 am 12:46 AM

JavaScripthassevenfundamentaldatatypes:number,string,boolean,undefined,null,object,andsymbol.1)Numbersuseadouble-precisionformat,usefulforwidevaluerangesbutbecautiouswithfloating-pointarithmetic.2)Stringsareimmutable,useefficientconcatenationmethodsf

What is event bubbling and capturing in the DOM? What is event bubbling and capturing in the DOM? Jul 02, 2025 am 01:19 AM

Event capture and bubble are two stages of event propagation in DOM. Capture is from the top layer to the target element, and bubble is from the target element to the top layer. 1. Event capture is implemented by setting the useCapture parameter of addEventListener to true; 2. Event bubble is the default behavior, useCapture is set to false or omitted; 3. Event propagation can be used to prevent event propagation; 4. Event bubbling supports event delegation to improve dynamic content processing efficiency; 5. Capture can be used to intercept events in advance, such as logging or error processing. Understanding these two phases helps to accurately control the timing and how JavaScript responds to user operations.

What's the Difference Between Java and JavaScript? What's the Difference Between Java and JavaScript? Jun 17, 2025 am 09:17 AM

Java and JavaScript are different programming languages. 1.Java is a statically typed and compiled language, suitable for enterprise applications and large systems. 2. JavaScript is a dynamic type and interpreted language, mainly used for web interaction and front-end development.

See all articles