Remix

Remix
By Rahul Mohan and Mohammed Farhan

Speakers
• Rahul Mohan, Talentica Software
• Mohammed Farhan, Talentica Software
2

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

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

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

SSR,CSR,SSG
• Cons of SSG:
• Problematic for sites with many pages
• No personalization
• Content may be stale
6

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

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

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

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

Prerequisites-The dev setup
12
• Node.js 14 or greater(Preferred 16)
• npm 7 or greater

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

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.

The file Structure
17
• Let’s delete the files and start a new project

The file Structure
18
• Change your root

Routes
• /
• /blog
• /blog/:blogID
• /blog/new
• /login
19

Routes: app/routes/index.tsx
21

Routes: Parameterized Routes
26

Style and all that jazz
• We are going back to the good old days of stylesheets
27

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

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

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

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

How to create cookie session with Remix ?
35

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() {
}

Unexpected Error handling
Error those are not known or guessed it could be catch with this

Expected Error handling
Error those are known and based on that dev can display information to user

SEO With Meta tags
 Remix has meta export for route modules
 <Meta/> Tag for app/root.tsx . It’s in built.

Resource Routing
 Renders other than HTML document like CSV data, image, RSS feed.
 Crete a file under routes jokes[.]rss.tsx

Remix can work without loading JavaScript to the page ?

Remix

Recommended

Recommended

More Related Content

Similar to Remix

Similar to Remix (20)

More from Talentica Software

More from Talentica Software (20)

Recently uploaded

Recently uploaded (20)

Remix