CINXE.COM

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1" /> <link href="../_app/immutable/assets/0.DbjY0eM-.css" rel="stylesheet"><link rel="icon" href="https://image.blogserve.co/captaincodeman/icon.ico"> <link rel="icon" href="https://image.blogserve.co/captaincodeman/icon-192x192.png" type="image/png" sizes="192x192"> <link rel="apple-touch-icon" href="https://image.blogserve.co/captaincodeman/icon-192x192.png"> <script defer="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5049499290128209" crossorigin="anonymous"></script> <script defer="" src="https://www.googletagmanager.com/gtag/js?id=UA-226828-9"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-226828-9'); </script><link rel="canonical" href="https://www.captaincodeman.com/tag/csr"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:creator" content="CaptainCodeman"> <meta property="og:url" content="https://www.captaincodeman.com/tag/csr"> <meta property="og:type" content="website"> <meta property="og:title" content="Captain Codeman"> <meta property="og:description" name="description" content="My random assortment of coding articles on all manner of technologies."> <meta property="og:image" content="https://image.blogserve.co/captaincodeman/computer-1209641_1280_960.jpeg?v=1"> <meta property="og:image:secure_url" content="https://image.blogserve.co/captaincodeman/computer-1209641_1280_960.jpeg?v=1"> <meta property="og:image:width" content="960"> <meta property="og:image:height" content="640"><title>Captain Codeman Blog</title> </head> <body> <script type="application/ld+json">{"@context":"https://schema.org","@type":"Blog","url":"https://www.captaincodeman.com","name":"Captain Codeman","alternativeHeadline":"Web Development and Cloud Computing","description":"My random assortment of coding articles on all manner of technologies.","potentialAction":{"@type":"SearchAction","target":"https://www.captaincodeman.com/search?q={query}","query":"required"},"sameAs":["https://www.twitter.com/CaptainCodeman","https://www.github.com/CaptainCodeman"]}</script> <div class="min-h-screen bg-white"><div class="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start md:space-x-10"><div><a href="/" class="flex items-center"><img class="mr-3 h-8 w-auto sm:h-10" src="https://image.blogserve.co/captaincodeman/icon-192x192.png" alt="Captain Codeman" width="192" height="192"> <span class="text-xl font-bold tracking-tighter text-gray-600">Captain Codeman</span></a></div> <div class="-my-2 -mr-2 md:hidden"><button id="menuopen" type="button" class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false"><span class="sr-only">Open menu</span> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div> <div class="hidden md:flex md:flex-1 md:items-center md:justify-between"><nav class="flex space-x-10"><a href="/category/web-development" class="text-base font-medium text-gray-500 hover:text-gray-900">Web-Development</a><a href="/category/server-side" class="text-base font-medium text-gray-500 hover:text-gray-900">Server-Side</a><a href="/category/cloud" class="text-base font-medium text-gray-500 hover:text-gray-900">Cloud</a><a href="/category/tools" class="text-base font-medium text-gray-500 hover:text-gray-900">Tools</a><a href="/about" class="text-base font-medium text-gray-500 hover:text-gray-900">About</a></nav></div></div> <div class="px-4 pt-4"><div class="mx-auto max-w-7xl text-center"><h1 class="text-4xl font-extrabold tracking-tighter text-gray-700">tag: csr</h1> <p class="mt-4 text-gray-800"></p></div></div>  <div class="px-4 pb-12 pt-4 sm:px-6 lg:px-8 lg:pb-12 lg:pt-8"><div class="mx-auto max-w-7xl"> <ins class="adsbygoogle mt-4" style="display:block" data-ad-client="ca-pub-5049499290128209" data-ad-slot="3649907970" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> ;(adsbygoogle = window.adsbygoogle || []).push({}) </script> <div class="mx-auto mt-12 grid max-w-lg gap-5 md:max-w-none md:grid-cols-2 lg:max-w-none lg:grid-cols-3"><div class="flex flex-col overflow-hidden rounded-lg shadow-lg"><a class="flex-shrink-0" href="/internationalization-formatting-with-intl-ssr-sveltekit"><picture><source type="image/avif" srcset="https://image.blogserve.co/captaincodeman/e0a574b98549df02b8ee847e1ceb7ec1/browser-preferred-languages_thumb.avif?v=1 240w,https://image.blogserve.co/captaincodeman/e0a574b98549df02b8ee847e1ceb7ec1/browser-preferred-languages_640.avif?v=1 640w,https://image.blogserve.co/captaincodeman/e0a574b98549df02b8ee847e1ceb7ec1/browser-preferred-languages_320.avif?v=1 320w" sizes="(min-width: 768px) 768px, 100vw"><source type="image/webp" srcset="https://image.blogserve.co/captaincodeman/e0a574b98549df02b8ee847e1ceb7ec1/browser-preferred-languages_thumb.webp?v=1 240w,https://image.blogserve.co/captaincodeman/e0a574b98549df02b8ee847e1ceb7ec1/browser-preferred-languages_640.webp?v=1 640w,https://image.blogserve.co/captaincodeman/e0a574b98549df02b8ee847e1ceb7ec1/browser-preferred-languages_320.webp?v=1 320w" sizes="(min-width: 768px) 768px, 100vw"><img class="h-48 w-full object-cover" src="https://image.blogserve.co/captaincodeman/e0a574b98549df02b8ee847e1ceb7ec1/browser-preferred-languages_thumb.jpeg?v=1" srcset="https://image.blogserve.co/captaincodeman/e0a574b98549df02b8ee847e1ceb7ec1/browser-preferred-languages_thumb.jpeg?v=1 240w,https://image.blogserve.co/captaincodeman/e0a574b98549df02b8ee847e1ceb7ec1/browser-preferred-languages_640.jpeg?v=1 640w,https://image.blogserve.co/captaincodeman/e0a574b98549df02b8ee847e1ceb7ec1/browser-preferred-languages_320.jpeg?v=1 320w" sizes="(min - width: 768px) 768px, 100vw" loading=lazy decoding="async" width = "320 " height = "175 " alt = "Internationalization Formatting with Intl + SSR + SvelteKit"></picture></a> <div class="flex flex-1 flex-col justify-between bg-white p-6"><div class="flex-1"><a href="/internationalization-formatting-with-intl-ssr-sveltekit" class="mt-2 block"><h2 class="text-xl font-semibold text-gray-900">Internationalization Formatting with Intl + SSR + SvelteKit</h2> <p class="mt-3 text-base text-gray-500">Using Intl to format dates and numbers on a purely client-side app is easy, but adding SSR can result in a flash of wrongly-styled content. Learn how to perfectly format SSR content to match the users locale</p></a></div> <div class="mt-6"> <a href="/category/web-development" class="m-1 inline-flex items-center rounded-full bg-green-100 px-3 py-0.5 text-sm font-medium text-green-800 no-underline">web-development</a> <a href="/tag/i18n" class="m-1 inline-flex items-center rounded-full bg-blue-100 px-3 py-0.5 text-sm font-medium text-blue-800 no-underline">i18n</a><a href="/tag/internationalization" class="m-1 inline-flex items-center rounded-full bg-blue-100 px-3 py-0.5 text-sm font-medium text-blue-800 no-underline">internationalization</a><a href="/tag/svelte" class="m-1 inline-flex items-center rounded-full bg-blue-100 px-3 py-0.5 text-sm font-medium text-blue-800 no-underline">svelte</a><a href="/tag/sveltekit" class="m-1 inline-flex items-center rounded-full bg-blue-100 px-3 py-0.5 text-sm font-medium text-blue-800 no-underline">sveltekit</a><a href="/tag/ssr" class="m-1 inline-flex items-center rounded-full bg-blue-100 px-3 py-0.5 text-sm font-medium text-blue-800 no-underline">ssr</a><a href="/tag/csr" class="m-1 inline-flex items-center rounded-full bg-blue-100 px-3 py-0.5 text-sm font-medium text-blue-800 no-underline">csr</a><a href="/tag/spa" class="m-1 inline-flex items-center rounded-full bg-blue-100 px-3 py-0.5 text-sm font-medium text-blue-800 no-underline">spa</a></div></div></div></div>  <ins class="adsbygoogle mt-4" style="display:block" data-ad-client="ca-pub-5049499290128209" data-ad-slot="3649907970" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> ;(adsbygoogle = window.adsbygoogle || []).push({}) </script></div></div> <footer class="bg-white"><div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 md:flex md:items-center md:justify-between lg:px-8"><div class="flex justify-center space-x-6 md:order-2">  <a href="https://www.twitter.com/CaptainCodeman" class="text-gray-400 hover:text-gray-500"><span class="sr-only">Twitter</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg></a>   <a href="https://www.github.com/CaptainCodeman" class="text-gray-400 hover:text-gray-500"><span class="sr-only">GitHub</span> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg></a></div> <div class="mt-8 md:order-1 md:mt-0"><p class="text-center text-base text-gray-400">漏 2017 Captain Codeman, Inc. All rights reserved.</p></div></div></footer> <x-transition id="menu" enter="duration-200 ease-out" enter-from="opacity-0 scale-95" enter-to="opacity-100 scale-100" leave="transition ease-in" leave-from="opacity-100 scale-100" leave-to="opacity-0 scale-95" class="svelte-18nsacp"><div class="absolute inset-x-0 top-0 origin-top-right transform p-2 transition md:hidden"><div class="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"><div class="px-5 pb-6 pt-5"><div class="flex items-center justify-between"><div><img class="h-8 w-auto" src="https://image.blogserve.co/captaincodeman/icon-192x192.png" alt="Captain Codeman"></div> <div class="-mr-2"><button id="menuclose" type="button" class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"><span class="sr-only">Close menu</span> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button></div></div></div> <div class="px-5 py-6"><div class="grid grid-cols-1 gap-4"><a href="/category/web-development" class="text-base font-medium text-gray-900 hover:text-gray-700">Web-Development</a><a href="/category/server-side" class="text-base font-medium text-gray-900 hover:text-gray-700">Server-Side</a><a href="/category/cloud" class="text-base font-medium text-gray-900 hover:text-gray-700">Cloud</a><a href="/category/tools" class="text-base font-medium text-gray-900 hover:text-gray-700">Tools</a><a href="/about" class="text-base font-medium text-gray-900 hover:text-gray-700">About</a></div></div></div></div></x-transition></div>  <script src="/transition.js" type="module"></script> <script src="/lite-youtube.js" type="module"></script> <script> menuopen.onclick = () => (menu.open = true) menuclose.onclick = () => (menu.open = false) </script> </body> </html>