Remix: An Introduction to Server-Side Rendering with React
•Download as PPTX, PDF•
0 likes•233 views
Topics covered: 1. Generating a new Remix project 2. Conventional files 3. Routes (including the nested variety) 4. Styling 5. Database interactions (via sqlite and prisma) 6. Mutations, Validation, and Authentication 7. Error handling 8. SEO with Meta Tags and much more
Recommended
Recommended
More Related Content
Similar to Remix: An Introduction to Server-Side Rendering with React
Similar to Remix: An Introduction to Server-Side Rendering with React (20)
More from Talentica Software
More from Talentica Software (20)
Recently uploaded
Recently uploaded (20)
Remix: An Introduction to Server-Side Rendering with React
- 1. Remix By Rahul Mohan and Mohammed Farhan
- 2. Speakers • Rahul Mohan, Talentica Software • Mohammed Farhan, Talentica Software 2
- 3. Some Prerequisite • ReactJS • What is SSR, CSR, SSG. • SSR (Server-side rendering) : The good old days of PHP and templating languages. • SSR is faster but can be more costly in terms of deployment (thin client) can’t be cached in end nodes (CDN’s) • Pros of SSR: • Social media-friendly. • SEO friendly. • Fast First Concertful Paint (FCP). • Up-to-date content. 3
- 4. SSR,CSR,SSG Cons: • Slow TTFB • Server-intensive workloads • Can’t be cached by traditional CDNs • Navigating across a site is slow without universal rendering • TTI is longer than FTP with universal rendering 4
- 5. SSR,CSR,SSG • SSR (Static side Rendering) • Build the pages at run time, this was what the original web was made on, but new frameworks have made this a good alternative. • Pros of SSG: • Fast load times • SEO friendly • Cons of SSG: • Problematic for sites with many pages • No personalization • Content may be stale 5
- 6. SSR,CSR,SSG • Cons of SSG: • Problematic for sites with many pages • No personalization • Content may be stale 6
- 7. SSR,CSR,SSG • Client-Side Rendering This everyone is known as react become very prevalent in the last five years. • Pros: • Very responsive sites • No need to wait for pages to be loaded • Easy in a production env lower build times with the code- base as static page assets don’t need to be built. 7
- 8. SSR,CSR,SSG • Cons • Hard to make is SEO Friendly (Google new ranking algorithm) • Bigger bundle sizes and slow first conceitful page. • Not he best option for very thin client there is a JS overhead. 8
- 9. Why Remix ? • A Runtime for React • Component + API Route (write your server-side code and components in the same file). • Cut down the API overheads of any fetch. • Avoid the standard Pattern: • <form method=“post” onSubmit={event => { event.preventDefault(); }} • Create state to manage data. • Use effect hook to update UI. 9
- 10. Why Remix ? • Use the form (browser) like the good old days of PHP let the browser manage the state. • useLoaderData,useActionData,useTransition • Amazing error bounders on the sever side code and the frontend side. 10
- 11. Why Remix ? 11
- 12. Prerequisites-The dev setup 12 • Node.js 14 or greater(Preferred 16) • npm 7 or greater
- 13. Initial setup • npx create-remix@latest • Follow along with the defaults use some other service if you want to have another server. (remix app serer should do fine for now) • cd project_name 13
- 14. Initial setup 14
- 16. The file Structure 16 • app/ - This is where all your Remix app code goes • app/entry.client.tsx - This is the first bit of your JavaScript that will run when the app loads in the browser. We use this file to hydrate our React components. • app/entry.server.tsx - This is the first bit of your JavaScript that will run when a request hits your server. Remix handles loading all the necessary data and you're responsible for sending back the response. We'll use this file to render our React app to a string/stream and send that as our response to the client. • app/root.tsx - This is where we put the root component for our application. You render the <html> element here. • app/routes/ - This is where all your "route modules" will go. Remix uses the files in this directory to create the URL routes for your app based on the name of the files. • public/ - This is where your static assets go (images/fonts/etc) • remix.config.js - Remix has a handful of configuration options you can set in this file.
- 17. The file Structure 17 • Let’s delete the files and start a new project
- 18. The file Structure 18 • Change your root
- 19. Routes • / • /blog • /blog/:blogID • /blog/new • /login 19
- 20. Old way of routes 20
- 27. Style and all that jazz • We are going back to the good old days of stylesheets 27
- 28. Style and all that jazz 28
- 29. Style and all that jazz 29
- 30. Some Boring but important DB setup 30 • As this has nothing to do with react in general, I will be breezing through most of it, but you can use any ORM you please and use any underlying DB or API you please • We will be using Prisma • And a local DB
- 31. LoaderFunction,useLoaderData,Link • LoaderFunction: This is simply an async function you export that returns a response • useLoaderData: The hook that replaces all the other use hooks on your fronted • Link: Similar to the one we all know and love from react-router. 31
- 32. AUTHENTICATION - Process of recognizing a user's identity Password based authentication In web world HTTP cookies is the way to use for authentication. HTTP Cookies – Server sends small piece of data to user’ browser and it stores it and sends back to server with later request for user specific authentication. How to set cookie ? Set-Cookie: <cookie-name>=<cookie-value> 32
- 33. 33
- 34. Remix‘s Session Allow server to identify if request coming form same person Remix comes with pre-built session storage options. 1. CreateCookieSessionStorage 2. createMemorySessionStorage 3. CreateFileSessionStorage 4. CreateCloudflareKVSessionStorage(cloudflare-workers) 5. CreateSessionStorage(Custom) 34
- 35. How to create cookie session with Remix ? 35
- 36. Error handling Error handling in remix is stellar Route modules has Error Boundary component exported and used Error Boundary also works on server errors, action and loaders. Error Boundary is some kind of same that we have in REACT16 36 export function ErrorBoundary() { }
- 37. Unexpected Error handling Error those are not known or guessed it could be catch with this
- 38. Expected Error handling Error those are known and based on that dev can display information to user
- 39. SEO With Meta tags Remix has meta export for route modules <Meta/> Tag for app/root.tsx . It’s in built.
- 40. Resource Routing Renders other than HTML document like CSV data, image, RSS feed. Crete a file under routes jokes[.]rss.tsx
- 41. Remix can work without loading JavaScript to the page ?
- 42. Thank You