Server-side scripting: Difference between revisions

Revision as of 06:27, 2 June 2024

Revision as of 06:53, 2 June 2024

Line 25:

Server-side scripts are completely processed by the servers instead of clients. When clients request a page containing server-side scripts, the application server processes the scripts and returns an HTML page to the client.

== Server-side rendering ==

With the advent of [[Single-page application|single-page applications]], an updated approach to server-side scripting was introduced, known as server-side rendering. With server-side rendering, static HTML can be sent from the server to the client, and client-side JavaScript then makes the web page [[Dynamic web page|dynamic]] by attaching event handlers to the HTML elements in a process called [[Hydration (web development)|hydration]]. Examples of frameworks that support server-side rendering are [[Next.js]], [[Nuxt.js]], [[Angular (web framework)|Angular]], and [[React (JavaScript library)|React]].

An alternative to server-side rendering is [[Static site generator|static site generation]]. With server-side rendering, the page is generally assembled on the server once per each request. By contrast, with static site generation, the application generates all the static HTML pages at build time. These pre-built pages are then sent to the client at each request, without having to build them again. This leads to faster rendering times, since a new page doesn't have to be generated on every request; the server simply hands over a file it already generated in the past. The downside is that when some data on the page changes, it needs to be rebuilt. Examples of static site generation tools are [[Jekyll (software)|Jekyll]] and [[Gatsby (software)|Gatsby]]. Sites generated by static site generation tools are often hosted on [[Netlify]] or [[GitHub]] pages.

With the advent of [[single-page application]]s, a new approach was introduced to generate HTML using the client application, but on the back end. Examples of frameworks that use [[Server-side rendering|SSR]] are [[Next.js]], [[Nuxt.js]] and [[Nest.js]]. They use [[React.js]], [[Vue.js]], and [[Angular (web framework)|Angular]], respectively, to generate the content of the server.

An alternative to server-side rendering is [[Static site generator|static site generation]]. With server-side rendering, the page is generally assembled on the server once per each request. By contrast, with static site generation, the application generates all the static HTML pages at build time. These pre-built pages are then sent to the client at each request, without having to build them again. This leads to faster rendering times, since a new page doesn't have to be generated on every request; the server simply hands over a file it already generated in the past. The downside is that when some data on the page changes, it needs to be rebuilt.

File generation can happen on a completely different computer, for example using [[continuous delivery]]. Example of SSG tools are [[Jekyll (software)|Jekyll]], [[Gatsby (software)|Gatsby]] or [[Eleventy (software)|Eleventy]]. Those sites are often hosted on [[Netlify]] or [[GitHub]] pages. GitHub also supports Jekyll projects where it automatically build the site when changes are added to [[Git]].

== Languages ==