<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Dawid Cedrych</title>
    <description>The latest articles on Forem by Dawid Cedrych (@dcedrych).</description>
    <link>https://forem.com/dcedrych</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F240462%2Fb5a4fc21-8821-45b9-bd3a-2042a6473026.jpg</url>
      <title>Forem: Dawid Cedrych</title>
      <link>https://forem.com/dcedrych</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/dcedrych"/>
    <language>en</language>
    <item>
      <title>My friend shared a great link last week, here it is...oh, wait.</title>
      <dc:creator>Dawid Cedrych</dc:creator>
      <pubDate>Thu, 23 Jan 2020 23:54:49 +0000</pubDate>
      <link>https://forem.com/dcedrych/my-friend-shared-a-great-link-last-week-here-it-is-oh-wait-847</link>
      <guid>https://forem.com/dcedrych/my-friend-shared-a-great-link-last-week-here-it-is-oh-wait-847</guid>
      <description>&lt;ul&gt;
&lt;li&gt;Dude, have you had a chance to check that great UI tips website I sent you last week?&lt;/li&gt;
&lt;li&gt;Ugh, yeah, it's great... (Have no clue what website he is talking about)&lt;/li&gt;
&lt;/ul&gt;




&lt;ul&gt;
&lt;li&gt;Hey, can you resend me that link to a blog about fundraising we talked about last week?&lt;/li&gt;
&lt;li&gt;Sure, let me see where did I send it...Slack, Telegram, Twitter, LinkedIn...?&lt;/li&gt;
&lt;/ul&gt;




&lt;ul&gt;
&lt;li&gt;This is a great post, you gotta check it out!&lt;/li&gt;
&lt;li&gt;Cool, will save it for later&lt;/li&gt;
&lt;li&gt;Nope, check it now, you will forget!&lt;/li&gt;
&lt;li&gt;I won't!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;(7623 days later, still haven't checked)&lt;/p&gt;




&lt;p&gt;If any of these scenarios sound familiar, I think you know what's on my mind.&lt;br&gt;
I think it's a serious problem that:&lt;br&gt;
a) We share great content with our friends and they never check it because one cannot remember to check every link shared on each medium.&lt;/p&gt;

&lt;p&gt;b) You remember your friend shared some great content a few weeks back but you have no idea how to find it (ok, you can spend an hour on searching the browser's history, but that's not a solution too)&lt;/p&gt;

&lt;p&gt;c) There are no real incentives to change that habit, we got used to bookmarking and saving for later anytime we can, but rarely get back to revise it.&lt;/p&gt;

&lt;p&gt;If you feel me, I want to hear from you. I guess I have an idea for an app that might solve it 🤭 &lt;/p&gt;

&lt;p&gt;Or maybe you already use some system to manage things people share with you?&lt;/p&gt;

</description>
      <category>discuss</category>
    </item>
    <item>
      <title>2020 Goal: Organize my notes and internalize knowledge by writing short essays.</title>
      <dc:creator>Dawid Cedrych</dc:creator>
      <pubDate>Tue, 07 Jan 2020 18:08:49 +0000</pubDate>
      <link>https://forem.com/dcedrych/2020-goal-organize-my-notes-and-internalize-knowledge-by-writing-short-essays-36gb</link>
      <guid>https://forem.com/dcedrych/2020-goal-organize-my-notes-and-internalize-knowledge-by-writing-short-essays-36gb</guid>
      <description>&lt;p&gt;While listening to various software and tech podcasts, I find tons of great insights. Sometimes between the lines, sometimes in seemingly unrelated shows.&lt;/p&gt;

&lt;p&gt;Over time I collected lots of quotes and notes from episodes I listened to.&lt;/p&gt;

&lt;p&gt;My New Year's Resolution is to revisit and compile them into short essays.&lt;/p&gt;

&lt;p&gt;While doing such, I am connecting the dots between seemingly unrelated notes and explore common concepts. &lt;/p&gt;

&lt;p&gt;Writing it down in the form of an essay requires additional research and helps internalize the knowledge.&lt;/p&gt;

&lt;p&gt;Sharing it with you is learning in public, which is also one my 2020 goal :)&lt;/p&gt;

&lt;p&gt;Here is the link to my publication&lt;br&gt;
&lt;a href="https://altabits.substack.com"&gt;https://altabits.substack.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you have tons of notes and little incentive to organize and learn from them, try this approach!&lt;/p&gt;

</description>
      <category>career</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Feedback Request: Startup Essays powered by Podcast's Quotes </title>
      <dc:creator>Dawid Cedrych</dc:creator>
      <pubDate>Fri, 03 Jan 2020 20:46:35 +0000</pubDate>
      <link>https://forem.com/dcedrych/feedback-request-startup-essays-powered-by-podcast-s-quotes-5330</link>
      <guid>https://forem.com/dcedrych/feedback-request-startup-essays-powered-by-podcast-s-quotes-5330</guid>
      <description>&lt;p&gt;At the beginning of 2020, I'm in the mood of starting some new content series and a related newsletter.&lt;/p&gt;

&lt;p&gt;As I'm an avid podcast listener, I collect my personal cherry-picked quotes from shows I listen to. These are mainly episodes about software, entrepreneurship, startups and business.&lt;/p&gt;

&lt;p&gt;I was thinking about just sharing a few quotes per issue, but I suppose niching down the scope of each edition might make more sense.&lt;br&gt;
There are tons of great insights that are spoken in a collateral "thinking-out-loud" manner, usually in shows you wouldn't normally look for them. &lt;/p&gt;

&lt;p&gt;Looking for ways to provide value to readers, I came up with the following format:&lt;br&gt;
I pick one theme concept/piece of wisdom and write a short narrative supported by quotes I got from podcasts. &lt;/p&gt;

&lt;p&gt;My idea is to curate and combine them in a coherent, themed series.&lt;/p&gt;

&lt;p&gt;I think the target audience includes indiehackers, founders, entrepreneurs, and VPs of product.&lt;/p&gt;

&lt;p&gt;To get you a sneak peek of what I'm up to, here is a draft of the first essay:&lt;/p&gt;




&lt;h2&gt;Look for existing market momentum&lt;/h2&gt;

&lt;p&gt;It might seem counterintuitive, but being an innovator or, even worse, an evangelist is not crucial to building something people want.&lt;br&gt;
Often, you will be much better off entering the existing market where others already paved the way. It is known as "The Last Mover Advantage", and it entails also avoiding r&amp;amp;d cycles your competitors have already failed at.&lt;/p&gt;

&lt;p&gt;Marc Andreessen, in a16z podcast episode "Why We Should Be Optimistic the Future" points out that this pattern is more common than we think&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Every successful technology I'm aware of, you know the things that are like all of a sudden like the next big thing like the iPhone in 2007 or just an example, they all have this incredible 25, 40 or 50 years backstory to them that you sometimes have to go back and excavate."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;As other examples, Mark mentions video conferencing technology that first surfaced in the 1960s, first smartphone concepts by RadioShack from 1982, or even fiber optic technology, which has its beginning in 1840 in Paris.&lt;/p&gt;

&lt;p&gt;Marc concludes that&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;It's less a question of what the new idea is, as it turns out the idea is probably already out there somewhere.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;These were the examples of succesful hardware, that have been around quite for a while before it actually took off. Can we find similar cases in the software industry? &lt;/p&gt;

&lt;p&gt;David Cancel, CEO of Drift suggest that Slack is the best example of the right market timing with a relatively little innovative product. The interview he gave in Software Engineering Daily episode is spot-on &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;There are different technologies that we use but, Slack is from a use case standpoint is not different than IRC 25 years ago, right? I often show people inside our engineering and product team who don't know what IRC is, and never used it, a screenshot of an IRC client from 20 years ago and then Slack next to each other and they're blown away. They're like, “It's exactly the same. Everything is the same.” They have never seen that. I'm like, yeah.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I remember IRC, do you? :) Anyway, it's interesting how many messaging communicators existed before Slack, but somehow none of them managed to achieve such high market share. Sure enough, Slack has done particular things incredibly well, such as an API-first approach and allowing for multiple third-party tools integrations. Still, the core functionality wasn't something new.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;We had technology like that 25 years ago, but we had subscale markets as a million of us using it, or five million or whatever the number was. Now billions are using. The reason it matters is that the behavior change has already happened. It's now normal and now you can build something in a much larger ecosystem, and I think for entrepreneurs and engineers who want to build something really pay attention to is there momentum already in the world happening that I can apply this to, versus trying to create your own momentum from scratch.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We arrive at the conclusion - leveraging existing market momentum is a shortcut compared to being someone who starts the momentum. Getting back to Marc Andreessen talk, I think the following line from the mentioned a16z podcast serves a good wrap up:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;It's less the question of when it's going to work, it's more the question of when it's going to work right&lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;Do you find it valuable? Is there anything you'd change? Would you subscribe to get it to your inbox every two weeks? If it sucks, tell me why :)&lt;/p&gt;

&lt;p&gt;I'd love to hear your feedback. Thanks in advance! :)&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>discuss</category>
      <category>podcast</category>
    </item>
    <item>
      <title>I started a new series of curated content articles and would love to get your feedback!</title>
      <dc:creator>Dawid Cedrych</dc:creator>
      <pubDate>Mon, 16 Dec 2019 14:05:03 +0000</pubDate>
      <link>https://forem.com/dcedrych/i-started-a-new-series-of-curated-content-articles-and-would-love-to-get-your-feedback-3ec2</link>
      <guid>https://forem.com/dcedrych/i-started-a-new-series-of-curated-content-articles-and-would-love-to-get-your-feedback-3ec2</guid>
      <description>&lt;p&gt;Here is the first issue&lt;/p&gt;

&lt;p&gt;&lt;a href="https://altalogy.com/blog/alta-curated-1/"&gt;https://altalogy.com/blog/alta-curated-1/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Each week, I curate 6 items - 2 podcasts, 2 readings and 2 videos.&lt;/p&gt;

&lt;p&gt;I believe as long as you poke around technology, entrepreneurship, software, or philosophy, chances are the content will be closely aligned with your preferences too. &lt;/p&gt;

&lt;p&gt;This is not about the latest trends or news. I know that sharing only timeless wisdom is a hard-to-achieve virtue, but I’ll do my best to find the best possible middle ground. &lt;/p&gt;

&lt;p&gt;I'd love to get your feedback!&lt;/p&gt;

</description>
      <category>discuss</category>
    </item>
    <item>
      <title>A case for productive note taking</title>
      <dc:creator>Dawid Cedrych</dc:creator>
      <pubDate>Thu, 12 Dec 2019 17:54:21 +0000</pubDate>
      <link>https://forem.com/dcedrych/a-case-for-productive-note-taking-5gie</link>
      <guid>https://forem.com/dcedrych/a-case-for-productive-note-taking-5gie</guid>
      <description>&lt;p&gt;You probably know this feeling when something inspiring, interesting, or generally exceptional pops into your head. I have the instant urge to jot it down to make sure it won't go away. And that's exactly what I usually do.&lt;/p&gt;

&lt;p&gt;Despite having Notion, Evernote, and many other note apps, I always end up with an uncategorized list of random, out of context sentences in the apple notes app. That makes it difficult to get back and review them later on, not to mention reflecting on particular ideas.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xIhElY5L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/mpsz7rc7fy4thqkscd0t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xIhElY5L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/mpsz7rc7fy4thqkscd0t.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
My Apple Notes app screenshot&lt;/p&gt;

&lt;p&gt;The reason why I have such a mess in my notes is quite simple: Launching a more sophisticated app like Evernote, taking a note, picking the right notebook, tag, or category is friction.&lt;/p&gt;

&lt;p&gt;I wonder whether you have this problem too?&lt;/p&gt;

&lt;p&gt;I'd like to stop for a moment and make one thing clear - I'm not thinking of another TODO app.&lt;/p&gt;

&lt;p&gt;There are various flavors of TODOs. There is a difference between "Buy milk" and "Establish healthy sleep habits". The first is simply a task with a clear definition of completion.&lt;br&gt;
Finding a way to be healthier is rather a long term goal, which should be tackled methodically from various angles.&lt;/p&gt;

&lt;p&gt;I think you now know where I'm going.&lt;/p&gt;

&lt;p&gt;There is a whole class of notes that are basically ideas you should reflect on over some time. These Ideas convey a lingering value and have the power of habit-forming, changing your mentality, and eventually shaping who you are.&lt;/p&gt;

&lt;p&gt;I might have an idea of how to make taking quick, yet essential notes frictionless. But before I even validate the idea, I'd like to ask for your help.&lt;/p&gt;

&lt;p&gt;Here are a few categories I identified when going through the notes I took in the last few months:&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Quote&lt;/b&gt; &lt;br&gt;
EXAMPLE:&lt;br&gt;
"Wealth creation is an evolutionarily recent positive-sum game. Status is an old zero-sum game. Those attacking wealth creation are often just seeking status." Naval Ravikant&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Reflection / Thought&lt;/b&gt; &lt;br&gt;
EXAMPLE: &lt;br&gt;
"The key to success is doing hard things and explaining them in simple words, never the opposite."&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Business Idea / Problem definition&lt;/b&gt;&lt;br&gt;
EXAMPLE: &lt;br&gt;
"A podcast app that allows for easy quote taking by tapping on airpods."&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Goal&lt;/b&gt; &lt;br&gt;
EXAMPLE:&lt;br&gt;
"Reduce my SaaS product churn by 30%."&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Wording&lt;/b&gt; &lt;br&gt;
EXAMPLE: &lt;br&gt;
"take a page out of (someone's) book." &lt;/p&gt;

&lt;p&gt;I'd love to learn what kind of quick yet essential notes you are taking. Are some of them fall into one of the categories above? What are the missing categories, in your opinion? &lt;/p&gt;

&lt;p&gt;I'd greatly appreciate your feedback and encourage further discussion. Thanks for reading!&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>motivation</category>
      <category>startup</category>
      <category>discuss</category>
    </item>
    <item>
      <title>A sneak peek from a backend system architecture guide - feedback request</title>
      <dc:creator>Dawid Cedrych</dc:creator>
      <pubDate>Tue, 12 Nov 2019 21:36:45 +0000</pubDate>
      <link>https://forem.com/dcedrych/a-sneak-peek-from-a-backend-system-architecture-guide-feedback-request-3kgg</link>
      <guid>https://forem.com/dcedrych/a-sneak-peek-from-a-backend-system-architecture-guide-feedback-request-3kgg</guid>
      <description>&lt;p&gt;You probably know this whole class of queries "What backend architecture should I...?" which always results in the same boring answer: &lt;br&gt;
"it depends".🙈&lt;/p&gt;

&lt;p&gt;There are tons of great resources online, and the problem is how to read them all in multiple tabs simultaneously. 🙃&lt;/p&gt;

&lt;p&gt;My dear friend Tomasz Antas, CTO of Altalogy, is curating "The ultimate comparison of web app backend architectures" in a form a long blog post with lots of charts, infographics, insights and advices.&lt;/p&gt;

&lt;p&gt;I'm posting a sneak peek here for two reasons:&lt;/p&gt;

&lt;p&gt;1) If there's anything you would change in the illustration below, I'd love to know now&lt;br&gt;
1) Tomasz got fewer followers than me, so I'm posting on his behalf 😂&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--bDypNSuT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ph4y6qk45frhwul29kuu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--bDypNSuT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ph4y6qk45frhwul29kuu.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let me know if such an infographic is clear and informative to you. Thanks! 🙏&lt;/p&gt;

</description>
      <category>serverless</category>
      <category>ruby</category>
      <category>architecture</category>
      <category>aws</category>
    </item>
    <item>
      <title>Client-Side Rendering versus Server-Side Rendering </title>
      <dc:creator>Dawid Cedrych</dc:creator>
      <pubDate>Tue, 05 Nov 2019 15:11:03 +0000</pubDate>
      <link>https://forem.com/dcedrych/client-side-rendering-versus-server-side-rendering-13e</link>
      <guid>https://forem.com/dcedrych/client-side-rendering-versus-server-side-rendering-13e</guid>
      <description>&lt;p&gt;&lt;em&gt;Originally posted by Jakub Klimek on Altalogy blog&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  History of the rendering solution
&lt;/h2&gt;

&lt;p&gt;Since the dawn of the web history, the only way to get your website on the screen was by using SSR. You had to upload your HTML &amp;amp; styles to the server, it compiled everything, and then you were ready to browse with fully populated HTML.&lt;/p&gt;

&lt;p&gt;However, these were times where the pages mainly contained pictures and text, like the first website in history → &lt;a href="http://info.cern.ch/"&gt;http://info.cern.ch/&lt;/a&gt;, which looks like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Nn-rDBCZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/dle3sfrmzzwijlm4eawy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Nn-rDBCZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/dle3sfrmzzwijlm4eawy.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Quickly jumping to nowadays, there's no longer the case. Current sites are closer to web applications like facebook, twitter, or eBay. The world of the web has grown and become more demanding. The needs of users have increased, people want to send messages, get it in real-time, watch videos, have more interaction with the website. Developers have started to render websites on the client-side using frameworks like angular, backbone, ember, react.js e.t.c.&lt;/p&gt;

&lt;p&gt;If you are asking yourself which method is better, CSR or SSR - first of all, you have to ask yourself - what do you want to build or achieve?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Learn React?&lt;/li&gt;
&lt;li&gt;Create a Single Page App?&lt;/li&gt;
&lt;li&gt;Want to build the frontend for a new web application?&lt;/li&gt;
&lt;li&gt;Build a website is mostly static?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;On this choice, it depends on what you should decide on.&lt;/p&gt;

&lt;h2&gt;
  
  
  Background
&lt;/h2&gt;

&lt;p&gt;Whenever you open a website, your browser makes a request to the server to get the content of the web - HTML, assets, styles, and the rest of the data.&lt;/p&gt;

&lt;p&gt;Request and response speed depends on a few things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;your internet connection speed&lt;/li&gt;
&lt;li&gt;distance between you and the server&lt;/li&gt;
&lt;li&gt;CDN optimization&lt;/li&gt;
&lt;li&gt;how many users are trying to open your site in one moment&lt;/li&gt;
&lt;li&gt;how the website is optimized to be loaded&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When the webpage is loaded, it can either be rendered in the browser (&lt;strong&gt;client-side rendering&lt;/strong&gt;) or on the server (&lt;strong&gt;server-side rendering&lt;/strong&gt;). Each is slightly different and has its pros and cons.&lt;/p&gt;

&lt;h2&gt;
  
  
  Client-Side Rendering
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--U_LYEgDh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/wx32o0wtgqa3lxv9izgk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--U_LYEgDh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/wx32o0wtgqa3lxv9izgk.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  What is client-side rendering?
&lt;/h3&gt;

&lt;p&gt;With a client-side rendering solution, when the user opens your website, his browser makes a request to the server, and the user gets a response with a single HTML file without any content, loading screen, e.t.c. It's a blank page until the browser fetches all linked JavaScripts and lets the browser compile everything before rendering the content.&lt;/p&gt;

&lt;h3&gt;
  
  
  Client-side rendering pros:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Fast render after initial load&lt;/li&gt;
&lt;li&gt;Faster navigation&lt;/li&gt;
&lt;li&gt;Lower server load&lt;/li&gt;
&lt;li&gt;Remarkable for web apps&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Client-side rendering cons:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;slower initial load&lt;/li&gt;
&lt;li&gt;unpredictable performance - you never know if your user will open and 'compile' your website on a mobile device with a very slow internet connection or not updated browser&lt;/li&gt;
&lt;li&gt;Client-side routing solutions can delay web crawling.&lt;/li&gt;
&lt;li&gt;SEO - if you not implemented correctly &lt;/li&gt;
&lt;li&gt;Initial req loads the page, CSS, layout, js,&lt;/li&gt;
&lt;li&gt;some or all content is not included&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Server-side rendering
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Bdp-T1rh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/w46xh1vjb96yxz3gjlu9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Bdp-T1rh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/w46xh1vjb96yxz3gjlu9.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  What is server-side rendering?
&lt;/h3&gt;

&lt;p&gt;As I mentioned above, - SSR is not a new concept. It has been used since the first backend solution, like PHP or JAVA. Server-side rendering is a method to render your website. When the user opens your page, his browser makes a request to the server, and the server generates ready to provide HTML.&lt;/p&gt;

&lt;h3&gt;
  
  
  Server-side rendering pros:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;SEO friendly - SSR guarantees your pages are easily indexable by search engines&lt;/li&gt;
&lt;li&gt;Better performance for the user - User will see the content faster&lt;/li&gt;
&lt;li&gt;Social Media Optimization: When people try to post your link on Facebook, Twitter, etc. then a nice preview will show up with the page title, description, and image.&lt;/li&gt;
&lt;li&gt;Shared code with backend node&lt;/li&gt;
&lt;li&gt;User-machine is less busy&lt;/li&gt;
&lt;li&gt;Best for static sites&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Server-side rendering cons:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;TTFB (Time to first byte) is slower; your server has to spend some time to prepare HTML for your page instead of sending almost empty HTML doc with link to javascript&lt;/li&gt;
&lt;li&gt;The server will be busier, can execute fewer request per second&lt;/li&gt;
&lt;li&gt;HTML doc will be bigger&lt;/li&gt;
&lt;li&gt;The page is viewable sooner, but it's not interactive and the beginning, a user has to wait until react will be done executing&lt;/li&gt;
&lt;li&gt;Full page reload after routes change&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Example page
&lt;/h2&gt;

&lt;p&gt;To make a comparison of these two methods, let's use a very simple website with one image.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--dGYF1LSq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/06h1jiv7ak1k9diwy837.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--dGYF1LSq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/06h1jiv7ak1k9diwy837.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Client-side rendering - code example
&lt;/h3&gt;

&lt;p&gt;Bellow you can check example HTML served to the user in the react application (create-react-app). As you can see there is no image yet, only simple HTML with linked js files.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!doctype html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"en"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"utf-8"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"icon"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/favicon.ico"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;React App&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/static/css/main.64d7c8c6.chunk.css"&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;noscript&amp;gt;&lt;/span&gt;You need to enable JavaScript to run this app.&lt;span class="nt"&gt;&amp;lt;/noscript&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"root"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/static/js/2.1cca17c9.chunk.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/static/js/main.234a2bc6.chunk.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  Server-side rendering - code example
&lt;/h3&gt;

&lt;p&gt;Bellow you can check our example website on next.js. As you can see, the main difference is that we already have HTML with image, ready to render.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"viewport"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"width=device-width,minimum-scale=1,initial-scale=1"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charSet=&lt;/span&gt;&lt;span class="s"&gt;"utf-8"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"jsx-3505738252"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Home&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"icon"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/favicon.ico"&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"jsx-3505738252"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"next-head-count"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"4"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"preload"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/_next/static/6AZVKi7KqSIP8pz3uCg0R/pages/index.js"&lt;/span&gt; &lt;span class="na"&gt;as=&lt;/span&gt;&lt;span class="s"&gt;"script"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"preload"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/_next/static/6AZVKi7KqSIP8pz3uCg0R/pages/_app.js"&lt;/span&gt; &lt;span class="na"&gt;as=&lt;/span&gt;&lt;span class="s"&gt;"script"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"preload"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/_next/static/runtime/webpack-035ac2b14bde147cb4a8.js"&lt;/span&gt; &lt;span class="na"&gt;as=&lt;/span&gt;&lt;span class="s"&gt;"script"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"preload"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/_next/static/chunks/commons.4a179d4644f468f50fbf.js"&lt;/span&gt; &lt;span class="na"&gt;as=&lt;/span&gt;&lt;span class="s"&gt;"script"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"preload"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/_next/static/runtime/main-6bef3842d6b2422a0213.js"&lt;/span&gt; &lt;span class="na"&gt;as=&lt;/span&gt;&lt;span class="s"&gt;"script"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"__next"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"jsx-3505738252"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"jsx-3505738252"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;cassName=&lt;/span&gt;&lt;span class="s"&gt;"img"&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/header.png"&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"jsx-3505738252"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"__NEXT_DATA__"&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"application/json"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dataManager&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;[]&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;props&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:{&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;pageProps&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:{}},&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;page&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;query&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:{},&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;buildId&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;6AZVKi7KqSIP8pz3uCg0R&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;nextExport&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;autoExport&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;async=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt; &lt;span class="na"&gt;data-next-page=&lt;/span&gt;&lt;span class="s"&gt;"/"&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/_next/static/6AZVKi7KqSIP8pz3uCg0R/pages/index.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;async=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt; &lt;span class="na"&gt;data-next-page=&lt;/span&gt;&lt;span class="s"&gt;"/_app"&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/_next/static/6AZVKi7KqSIP8pz3uCg0R/pages/_app.js"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/_next/static/runtime/webpack-035ac2b14bde147cb4a8.js"&lt;/span&gt; &lt;span class="na"&gt;async=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/_next/static/chunks/commons.4a179d4644f468f50fbf.js"&lt;/span&gt; &lt;span class="na"&gt;async=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/_next/static/runtime/main-6bef3842d6b2422a0213.js"&lt;/span&gt; &lt;span class="na"&gt;async=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  Performance
&lt;/h2&gt;

&lt;p&gt;To understand a nomenclature of the all graphs bellow I will use this image as an explanation, thanks to Google: &lt;a href="https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#user-centric_performance_metrics"&gt;https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#user-centric_performance_metrics&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--bx_dCYNP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/a2jncpqb6t9rtvd43za1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--bx_dCYNP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/a2jncpqb6t9rtvd43za1.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  CSR performance
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Simulated Slow 4G, 4x CPU slowdown&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Vgz_tisC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/0ns0anf6jpkr0f64m79c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Vgz_tisC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/0ns0anf6jpkr0f64m79c.png" alt="Client Side Rendering"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UyBqpQ3w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/c3ocswr70tbg2p61s16u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UyBqpQ3w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/c3ocswr70tbg2p61s16u.png" alt="Client Side Rendering"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No throttling&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iXYE0IVI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/xxjrd9laoe82u13dyfvk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iXYE0IVI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/xxjrd9laoe82u13dyfvk.png" alt="Client Side Rendering"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XN0lCIgo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/19fbh4yo7q7vqougjrdm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XN0lCIgo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/19fbh4yo7q7vqougjrdm.png" alt="Client Side Rendering"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  SSR performance
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Simulated Slow 4G, 4x CPU slowdown&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VTyh25Ym--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/i7sgbq9xoc7k2xikuf59.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VTyh25Ym--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/i7sgbq9xoc7k2xikuf59.png" alt="Server Side Rendering"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--w_wzandG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/hm0amufzkv0opmdcifcc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--w_wzandG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/hm0amufzkv0opmdcifcc.png" alt="Server Side Rendering"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No throttling &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0MnuTSdE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/qyh8o218j27y5tkqtmi1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0MnuTSdE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/qyh8o218j27y5tkqtmi1.png" alt="Server Side Rendering"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6yd1t-1b--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/f48p9hll7bko17tj9gom.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6yd1t-1b--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/f48p9hll7bko17tj9gom.png" alt="Server Side Rendering"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusions
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;both apps become viewable and interactable after 1-1,5 seconds, in this simple example SSR is a little bit faster&lt;/li&gt;
&lt;li&gt;in server-side-rendering user will get HTML rendered much faster than in client-side-rendering&lt;/li&gt;
&lt;li&gt;in client-side-rendering, non-content can be displayed until browser will download all the js files&lt;/li&gt;
&lt;li&gt;DOM Content is loaded much faster in SSR than in CSR; in client-side-rendering, you have to wait to download js&lt;/li&gt;
&lt;li&gt;first Contentful Paint is also faster at SSR&lt;/li&gt;
&lt;li&gt;a blank page is much longer on client-side-rendering, as a developer you have to avoid it using some loader, or loading screen&lt;/li&gt;
&lt;li&gt;image is faster available with SSR compared to CSR, because when using CSR the images cannot be downloaded before linked js files, HTML is not ready, &lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  What should I use?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;If you want to build site which is mostly static (blog, portfolio, landing page), use &lt;strong&gt;Gatsby&lt;/strong&gt;, it's not SSR, but it pre-renders the website into HTML at the build time&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If you want to build a web app with react, and you care about SEO, easier social media optimization and faster render for user you should think about SSR and framework like &lt;strong&gt;next.js&lt;/strong&gt; &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If you building a SPA (single page application), and you don't want to configure everything on the server side like: i18n, router e.t.c. you should use &lt;strong&gt;create-react-app&lt;/strong&gt; &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Originally posted by Jakub Klimek on Altalogy blog&lt;/em&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>gatsby</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Health iOS app redesign sprint in 8 hours. A case study from our internal hackathon.</title>
      <dc:creator>Dawid Cedrych</dc:creator>
      <pubDate>Wed, 09 Oct 2019 12:03:21 +0000</pubDate>
      <link>https://forem.com/dcedrych/ios-app-redesign-sprint-in-8-hours-a-case-study-from-our-internal-hackathon-2l7b</link>
      <guid>https://forem.com/dcedrych/ios-app-redesign-sprint-in-8-hours-a-case-study-from-our-internal-hackathon-2l7b</guid>
      <description>&lt;p&gt;Hey everyone!&lt;/p&gt;

&lt;p&gt;&lt;b&gt;It's Hacktoberfest, and I'd like to share a case study from our recent internal UX/UI design hackathon!&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;How many times you came across quite a nice product, with huge potential, but it looked and felt just...meh?&lt;/p&gt;

&lt;p&gt;I decided to see if I can fix some of these products one hackathon at a time.&lt;/p&gt;

&lt;p&gt;Today we held our first internal hackathon for designers and product owners. The formula is as follows:&lt;br&gt;
1) Pick industry&lt;br&gt;
2) Browse Angel List, Betapage, App Store looking for startups that lack good design but has the potential to become something big&lt;br&gt;
3) Ask the founders for consent to play with it&lt;br&gt;
4) Pick one&lt;br&gt;
5) Let creative people redesign a few screens and make it 10x better within one day.&lt;/p&gt;

&lt;p&gt;This time we picked the DeepH iOS app (Healthcare).&lt;/p&gt;

&lt;p&gt;Happy reading!&lt;/p&gt;

&lt;h1&gt;
  
  
  Overview
&lt;/h1&gt;

&lt;p&gt;DeepH app is a general utility health app that encourages a healthy lifestyle by tracking steps, workout, weight, height, meditation time, sleep. The user can sync external data sources (Fitbit, Apple Health, Google Fit) or add entries manually.&lt;/p&gt;




&lt;h1&gt;
  
  
  Objective
&lt;/h1&gt;

&lt;p&gt;Medical applications often store/process sensitive user data. Some apps feature health insights based on blood pressure, weight, age, or other parameters/risk factors. Needless to say, when it comes to health, credibility and reliability are the most important values that build trust with users.&lt;/p&gt;

&lt;p&gt;While most of them are not necessarily concerned with the technical solutions under the hood, they often assess credibility by how the app looks and feels like.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The redesign sprint has been scoped to identify and fix UX bottlenecks and take the user interface to a whole new level of a fully-fledged product.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Goals
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Acquire more users&lt;/li&gt;
&lt;li&gt;Build a relationship with existing users&lt;/li&gt;
&lt;li&gt;Convert free users into premium users&lt;/li&gt;
&lt;/ul&gt;




&lt;h1&gt;
  
  
  Process
&lt;/h1&gt;

&lt;p&gt;The team consisted of a product owner and a UX/UI designer who worked together for 8 hours to redesign two screens of the application: the main dashboard and fitness data preview.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xgA5khjM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/uaedqgug34iv9e8mc8nh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xgA5khjM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/uaedqgug34iv9e8mc8nh.png" alt="Zeplin"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;They collaborated remotely using Slack, Sketch, and Zeplin.&lt;/p&gt;

&lt;p&gt;Started with two dashboard propositions, they picked one and polished it to establish a unified design system and elements styling.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hIYAQOh---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/kcmtk5xn0do9klj2hx18.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hIYAQOh---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/kcmtk5xn0do9klj2hx18.png" alt="Zeplin"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  Results
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Main Dashboard
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gT4nt19L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/paxew1vpa2rvaihhbp3p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gT4nt19L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/paxew1vpa2rvaihhbp3p.png" alt="Dashboard"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Grid helps memorize the position of an element and make the dashboard better organized&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Key insights
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Swap the list for a two-column grid&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Lists are pretty good for an ordered collection of elements, especially when the number of them is dynamic. In this case, the grid helps memorize the position of an element and make the dashboard better organized.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--OGyJCKdX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ehpjaq4wiwayx8nje5ia.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OGyJCKdX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ehpjaq4wiwayx8nje5ia.png" alt="Grid"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Dashboard as data display&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Users can now see all relevant data, such as a number of steps, resting heart rate, or workout time right in the dashboard. There's no need for the additional tap to check current metrics. On the other hand, the subtle shadows dropped on tiles encourage to tap and see the detailed metric break down and chart.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;More native elements&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Obeying Apple design guidelines for bottom tab bar, navigation bar, buttons, labels, fonts, fonts, spacings, paddings makes the user feel familiar and comfortable.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Color palette&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Dominant white color, complemented by blue details and subtle shadows, makes for a clean, sleek layout.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--u4tssABd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/d9mid8g8hnbg39d489pq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--u4tssABd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/d9mid8g8hnbg39d489pq.png" alt="Colors"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Emotional, engaging copywriting&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If someone does not hit the full health score, let's motivate him/her to be more active in a friendly way.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Call To Action button to connect data sources&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The floating bottom button is more accessible and won't be overlooked on scroll down. Keeping the button title device-agnostic help add more tracker integrations in the future&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Each fitness parameter has its own assigned color&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Colors help associate and recognize a specific type of information.&lt;/p&gt;

&lt;h2&gt;
  
  
  Meditation data preview
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mr7uLEIZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ptqmdvfs2wo44d92k7y9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mr7uLEIZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ptqmdvfs2wo44d92k7y9.png" alt="Meditation"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;While bar charts are better for comparison, line charts are better for evolution&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Key insights
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Change bar chart to a line chart&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;While bar charts are better for comparison, line charts are better for evolution. Thus, line charts serve better for motivational purposes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--v3KAH6IZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/4ghgv7ftleajjjvi0ycz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--v3KAH6IZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/4ghgv7ftleajjjvi0ycz.png" alt="Charts"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Bold "plus" to add missing entry&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Sometimes one can just forget to submit the score of the day. Therefore, the add button for missing entries should stand out.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Engaging illustrations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;"Did you know..." section should drive more attention as properly selected pieces of trivia can do magic to form habits to use the app regularly.&lt;/p&gt;




&lt;h1&gt;
  
  
  Thanks for reading!
&lt;/h1&gt;

&lt;p&gt;Did you like the article and the redesigned views? Post your feedback in the comments section!&lt;/p&gt;

&lt;p&gt;To see more of our designs visit out &lt;a href="https://dribbble.com/altalogy"&gt;Dribbble profile&lt;/a&gt;,&lt;br&gt;
or check &lt;a href="https://altalogy.com/"&gt;our website&lt;/a&gt; to learn about our company.&lt;br&gt;
😊&lt;/p&gt;

</description>
      <category>hacktoberfest</category>
      <category>design</category>
      <category>ios</category>
      <category>ux</category>
    </item>
    <item>
      <title>New Service For Early stage Startups - Idea Validation</title>
      <dc:creator>Dawid Cedrych</dc:creator>
      <pubDate>Sat, 05 Oct 2019 23:02:55 +0000</pubDate>
      <link>https://forem.com/dcedrych/new-service-for-early-stage-startups-feedback-request-7ch</link>
      <guid>https://forem.com/dcedrych/new-service-for-early-stage-startups-feedback-request-7ch</guid>
      <description>&lt;p&gt;It is a common practice among software house companies to offer product design discovery workshops (similar to famous Google Design Sprint) as the first step of the cooperation.&lt;/p&gt;

&lt;p&gt;The purpose of such workshops is to brainstorm the idea, prototype it, and propose MVP to create a detailed cost estimate of the project.&lt;br&gt;
The cost varies from $2000 to $7000, depending on the length of the workshops.&lt;/p&gt;

&lt;p&gt;I hypothesize that early-stage startups may have misaligned needs and might not benefit from such workshops for several reasons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;They already brainstormed and defined MVP, and even got mockups and clickable prototype, they just need to learn about development costs.&lt;/li&gt;
&lt;li&gt;They have a product in mind but haven't thought about the problem it solves. Therefore, all they need at this stage is a brainstorming session with professionals who help them find the right direction; there's no need for prototypes or system architecture blueprint.&lt;/li&gt;
&lt;li&gt;Their idea is inherently wrong or impossible to execute. The workshops should conclude after the first hour or so.&lt;/li&gt;
&lt;li&gt;They got techies and team members with specific knowledge in-house. They just need wireframes and hi-fidelity mockups&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I think such workshops should be customized for every customer while being modular.&lt;/p&gt;

&lt;p&gt;The scenario is as follows:&lt;br&gt;
I visit a software house website and compose my workshops based on my needs. I see that wireframes cost X, product canvas costs Y, etc. I select modules and send the inquiry pretty much like cars can be customized online.&lt;/p&gt;

&lt;p&gt;Do you think this would be a good idea?&lt;/p&gt;

&lt;p&gt;Have you ever attended any paid product design workshops?&lt;br&gt;
If so, do you think there's been anything missing that would undoubtedly increase the delivered value for you as a startup founder?&lt;/p&gt;

&lt;p&gt;I look forward to getting your feedback!&lt;/p&gt;

</description>
      <category>startup</category>
      <category>design</category>
      <category>product</category>
      <category>mvp</category>
    </item>
  </channel>
</rss>
