React Server Side Components - Revision history

Iwiseman: /* Introduction */

2023-09-23T23:27:30Z

Introduction

← Older revision		Revision as of 23:27, 23 September 2023
Line 5:		Line 5:
	* Maybe improve performance		* Maybe improve performance
	* Make the build a bit more complex		* Make the build a bit more complex
			For this page we will deal with SSR where all of the code is on the server and React Server components where components are split between client and server.

	=Server Side Rendering (SSR)=		=Server Side Rendering (SSR)=
	This is where the who of application is rendered on the server. I am using vite so the setup of this is quite easy.You basically create an express service and server pages from this. The example I found was [[https://vitejs.dev/guide/ssr.html here]]		This is where the who of application is rendered on the server. I am using vite so the setup of this is quite easy.You basically create an express service and server pages from this. The example I found was [[https://vitejs.dev/guide/ssr.html here]]

Iwiseman: /* Server Side Rendering (SSR) */

2023-09-23T23:18:56Z

Server Side Rendering (SSR)

← Older revision		Revision as of 23:18, 23 September 2023
Line 6:		Line 6:
	* Make the build a bit more complex		* Make the build a bit more complex
	=Server Side Rendering (SSR)=		=Server Side Rendering (SSR)=
	This is where the who of application is rendered on the server. I am using vite so the setup of this is quite easy.You basically create an express service and server pages from this. The example I found was [[https://vitejs.dev/guide/ssr.html here]]~~<br>~~		This is where the who of application is rendered on the server. I am using vite so the setup of this is quite easy.You basically create an express service and server pages from this. The example I found was [[https://vitejs.dev/guide/ssr.html here]]
	~~<br>~~
	*Express Server		*Express Server
	*Client Entry Point (for testing)		*Client Entry Point (for testing)

Iwiseman: /* Server Side Rendering (SSR) */

2023-09-23T23:18:38Z

Server Side Rendering (SSR)

← Older revision		Revision as of 23:18, 23 September 2023
Line 11:		Line 11:
	*Client Entry Point (for testing)		*Client Entry Point (for testing)
	*Server Entry Point		*Server Entry Point
			*Amend Index.html
	*Packages.json scripts		*Packages.json scripts
	==Express Server==		==Express Server==
Line 174:		Line 175:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			==Amend Index.html==
	Change the index.html		Change the index.html
	<syntaxhighlight ~~lange~~="html">		<syntaxhighlight lang="html">
	<!doctype html>		<!doctype html>
	<html lang="en">		<html lang="en">

Iwiseman: /* Client Entry Point (For Testing) */

2023-09-23T23:17:24Z

Client Entry Point (For Testing)

← Older revision		Revision as of 23:17, 23 September 2023
Line 151:		Line 151:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	==~~Client~~ Entry Point ~~(For Testing)~~==		==Server Entry Point==
	And a server entry point		And a server entry point
	<syntaxhighlight lang="ts">		<syntaxhighlight lang="ts">
Line 190:		Line 190:
	</html>		</html>
	</syntaxhighlight>		</syntaxhighlight>

	==Packages.json scripts==		==Packages.json scripts==
	And here is the packages.json		And here is the packages.json

Iwiseman: /* Server Side Rendering (SSR) */

2023-09-23T23:16:47Z

Server Side Rendering (SSR)

← Older revision		Revision as of 23:16, 23 September 2023
Line 122:		Line 122:
	createServer()		createServer()
	</syntaxhighlight>		</syntaxhighlight>
	*Client Entry Point (for testing)		==Client Entry Point (for testing)==
	Created Entry Points, one the client in case we want to debug		Created Entry Points, one the client in case we want to debug
	<syntaxhighlight lang="ts">		<syntaxhighlight lang="ts">

Iwiseman: /* Server Side Rendering (SSR) */

2023-09-23T23:15:51Z

Server Side Rendering (SSR)

← Older revision		Revision as of 23:15, 23 September 2023
Line 8:		Line 8:
	This is where the who of application is rendered on the server. I am using vite so the setup of this is quite easy.You basically create an express service and server pages from this. The example I found was [[https://vitejs.dev/guide/ssr.html here]]<br>		This is where the who of application is rendered on the server. I am using vite so the setup of this is quite easy.You basically create an express service and server pages from this. The example I found was [[https://vitejs.dev/guide/ssr.html here]]<br>
	<br>		<br>
			*Express Server
			*Client Entry Point (for testing)
			*Server Entry Point
			*Packages.json scripts
			==Express Server==
	For the main part I created the Express Server		For the main part I created the Express Server
	<syntaxhighlight lang="ts">		<syntaxhighlight lang="ts">
Line 117:		Line 122:
	createServer()		createServer()
	</syntaxhighlight>		</syntaxhighlight>
			*Client Entry Point (for testing)
	Created Entry Points, one the client in case we want to debug		Created Entry Points, one the client in case we want to debug
	<syntaxhighlight lang="ts">		<syntaxhighlight lang="ts">
Line 145:		Line 151:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			==Client Entry Point (For Testing)==
	And a server entry point		And a server entry point
	<syntaxhighlight lang="ts">		<syntaxhighlight lang="ts">
Line 183:		Line 190:
	</html>		</html>
	</syntaxhighlight>		</syntaxhighlight>
			==Packages.json scripts==
	And here is the packages.json		And here is the packages.json
	<syntaxhighlight ~~lange~~="js">		<syntaxhighlight lang="js">
	...		...
	"scripts": {		"scripts": {

Iwiseman: /* First example */

2023-09-23T23:12:10Z

First example

Show changes

Iwiseman: /* First example */

2023-09-23T03:03:10Z

First example

← Older revision		Revision as of 03:03, 23 September 2023
Line 7:		Line 7:
	=First example=		=First example=
	This was taken from [[https://www.youtube.com/watch?v=F-v1IXvFd_4 here]]		This was taken from [[https://www.youtube.com/watch?v=F-v1IXvFd_4 here]]
	<~~Syntaxhighlight~~ lang="bash">		<syntaxhighlight lang="bash">
	npm i express		npm i express
	npm i @babel/preset-env @babel/preset-react @babel/register		npm i @babel/preset-env @babel/preset-react @babel/register
	npm i ignore-styles		npm i ignore-styles
	<~~Syntaxhighlight~~ />		</syntaxhighlight>

Iwiseman: Created page with "=Introduction= React by default downloads your bundles and generates HTML on the client. This approach change the process to generate HTML on the Server and send it to the client. This should. * Improve SEO as the HTML can now by read on the server by the robots * Improve the user experience as the HTML is rendered quicker * Maybe improve performance * Make the build a bit more complex =First example= This was taken from https://www.youtube.com/watch?v=F-v1IXvFd_4 here..."

2023-09-23T03:02:06Z

Created page with "=Introduction= React by default downloads your bundles and generates HTML on the client. This approach change the process to generate HTML on the Server and send it to the client. This should. * Improve SEO as the HTML can now by read on the server by the robots * Improve the user experience as the HTML is rendered quicker * Maybe improve performance * Make the build a bit more complex =First example= This was taken from https://www.youtube.com/watch?v=F-v1IXvFd_4 here..."

New page

=Introduction=
React by default downloads your bundles and generates HTML on the client. This approach change the process to generate HTML on the Server and send it to the client. This should.
* Improve SEO as the HTML can now by read on the server by the robots
* Improve the user experience as the HTML is rendered quicker
* Maybe improve performance
* Make the build a bit more complex
=First example=
This was taken from [[https://www.youtube.com/watch?v=F-v1IXvFd_4 here]]
<Syntaxhighlight lang="bash">
npm i express
npm i @babel/preset-env @babel/preset-react @babel/register
npm i ignore-styles
<Syntaxhighlight />