ic_agile_128ic_business_128ic_agile_white_128ic_banknote_smile_128ic_business_128ic_business_128ic_checkmark_128ic_client_team_manager_128ic_code_file_128ic_code_files_128ic_corporate_cloud_platforms_128ic_crossplatform_apps_128ic_dedicated_team_128ic_developer_128ic_development_team_128ic_enterprise_128ic_faster_timeframe_128ic_fixed_price_128ic_graph_down_128ic_graph_down_128ic_hourly_128ic_hourly_white_128ic_information_finder_128ic_junior_developer_128ic_managed_team_128ic_message_128ic_mobile_app_startups_128ic_mobile_development_128ic_mobile_development_up_128ic_mobile_devices_128ic_multiplatform_128ic_multiplatform_white_128ic_pricetag_128ic_project_checklist_128ic_project_management_128ic_project_management_team_128ic_research_and_development_team_128ic_scalable_team_128ic_senior_developer_128ic_smaller_codebase_128ic_smaller_price_128ic_startup_128ic_team_manager_128ic_three_times_faster_128Arrow_Dropdownic_001_google+_16ic_002_xing_16Group 2ic_003_facebook_16ic_004_linkedIn_16Groupic_005_message_16ic_006_upload_16ic_007_remove_16ic_008_email_16ic_009_attachment_16ic_010_file_16ic_011_name_16ic_012_arrow_left_16ic_013_arrow_right_16ic_014_arrow_down_16ic_015_arrow_up_16ic_016_dropdown_arrow_down_16ic_016_dropdown_arrow_leftic_016_dropdown_arrow_rightic_017_K&C_dropdown_arrow_up_16ic_018_language_16ic_019_Quote_16ic_020_+_16ic_021_=_16ic_022_phone_16ic_023_twitter_16ic_024_position_16ic_025_company_16ic_026_search_16ic_027_mobile_16ic_028_fax_16ic_029_location_16ic_030_enlarge_16ic_031_downscale_16ic_032_contactic_download_normal_16pxic_033_skype_16ic_006_download_16 copySearchGroup 26Rss_font_awesomelinkedintwitterK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxConsul_VerticalLogo_FullColorPacker_VerticalLogo_FullColorTerraform_VerticalLogo_FullColorVault_VerticalLogo_FullColorethereum_black_64ic_Interest_based_64ic_acrivate_card_64ic_api_client_64ic_application_architecture_64ic_application_architecture_ white_64ic_application_development_user_64ic_application_development_user_64ic_arrow_down_64ic_automated_backups_64ic_automated_infrastructure_provisioning_64ic_automated_infrastructure_provisioning_white_64ic_automated_storage_64ic_automated_storage_64ic_automation_64ic_microservice_architecture_64ic_avaliability_across_the_world_64ic_avaliability_across_the_world_white_64ic_blockchain_64ic_blockchain_white_64ic_brackets_64ic_brackets_64ic_build_64ic_build_64ic_build_64ic_business_64ic_business_partnership_64ic_business_partnership_white_64ic_business_64ic_calculator_64ic_calendar_64ic_calendar_64ic_car_rent_64ic_card_renewal_64ic_chat_64ic_chat_bubbles_64ic_chat_bubbles_64ic_chat_white_64ic_checklist_64ic_checkmark_64ic_blockchain_64ic_smart_development_64ic_blockchain_consulting_64ic_checkmark_white_64ic_clock_64ic_clock_white_64ic_cloud_media_64ic_cloud_solutionsic_cloud_solutions_whiteic_cluster_64ic_cluster_white_64ic_code_base_optimization_64ic_coding_64ic_coding_white_64ic_commenting_widget_64ic_commenting_widget_64ic_containers_64ic_containers_white_64ic_continious_64ic_continious_delivery_64ic_continious_delivery_white_64ic_continious_release_64ic_continious_release_white_64ic_continious_white_64ic_cost_saving_64ic_cost_saving_white_64ic_cpu_load_64ic_credit_card_64ic_crossplatform_app_development_64ic_crossplatform_app_development_white_64ic_custom_crm_64ic_custom_crm_64ic_independence_consulring_64ic_database_calls_64ic_database_calls_white_64ic_dedicated_teams_64ic_dedicated_teams_64ic_desktop_application_user_64ic_desktop_application_user_64ic_desktop_code_64ic_desktop_code_white_64ic_developer_64ic_developer_white_64ic_development_64ic_devops_64ic_devops_64ic_documents_64ic_documents_graph_64ic_documents_graph_white_64ic_documents_white_64ic_download_presentation_64ic_education_64ic_email_open_64ic_email_open_white_64ic_environment_healthcheckethereum_white_64ic_euro_64ic_euro_white_64ic_failure_solved_64ic_gdpr_64ic_globe_outlines_64ic_good_quality_64ic_high_load_websites_64ic_high_load_websites_white_64ic_hotel_booking_64ic_inability_64ic_inability_white_64ic_increase_64ic_increase_white_64ic_increasing_team_64ic_independence_64ic_integration_64ic_it_outsourcing_64ic_it_outsourcing_64ic_knowledge_sharing_64ic_mobile_devices_64ic_laptop_user_64ic_laptop_user_white_64ic_launch_64ic_launch_white_64ic_learning_64ic_learning_two_white_64ic_lighthouse_64ic_link_64ic_load_balancer_64ic_load_balancer_64ic_load_card_64ic_lock_64ic_lock_white_64ic_low_cost_64ic_low_load_websites_64ic_maintenance_tools_64ic_maintenance_tools_white_64ic_media_player_64ic_media_player_white_64ic_messaging_platforms_64ic_microservice_architecture_64ic_microservices_64ic_microservices_64ic_mobile_app_64ic_mobile_app_64ic_mobile_content_64ic_mobile_development_64ic_mobile_development_white_64ic_mobile_devices_64ic_mobile_devices_white_64ic_mobile_payments_64ic_mobile_social_media_applications_64ic_mobile_workflows_64ic_money_transfers_64ic_multimedia_sharing_64ic_multimedia_sharing_white_64ic_my_garage_64ic_no_access_64ic_no_access_white_64ic_no_oldschool_64ic_online_marketplaces_64ic_online_marketplaces_white_64ic_online_trading_64ic_online_trading_64ic_pair_device_64ic_parallels_64ic_parallels_white_64ic_passcode_64ic_payment_systems_64ic_performance_64ic_performance_issues_64ic_performance_issues_white_64ic_performance_white_64ic_plane_64ic_plane_white_64ic_plus_64ic_plus_64ic_pricetags_64ic_pricetags_64ic_product_64ic_product_search_64ic_product_white_64ic_productivity_tools_64ic_productivity_tools_64ic_project_delivery_64ic_project_delivery_white_64ic_project_management_64ic_project_management_collaboration_64ic_project_management_team_64ic_project_management_team_white_64ic_project_risks_reduced_64ic_quality_mark_64ic_quality_mark_64ic_quality_mark_white_64ic_question_64ic_react_native_64ic_response_time_64ic_response_time_white_64ic_rest_api_64ic_retail_64ic_transparency_consulting_64ic_scale_up_64ic_scale_up_white_64ic_security_64ic_security_64ic_self_healing_64ic_self_healing_64 copyic_send_money_64ic_server_64ic_server_white_64ic_shopping_64ic_shopping_white_64ic_sleep_mode_64ic_small_is_beautiful_64ic_smaller_price_64ic_social_benefits_64ic_social_connections_64ic_socket_64Group 20ic_spare_parts_for_cars_64ic_spare_parts_for_cars_white_64ic_speedometer_64ic_performance_consulting_64ic_speedometer_white_64ic_startup_64ic_startup_white _64ic_target_64ic_team_64ic_testing_64ic_testing_checklist_64ic_testing_checklist_white_64ic_testing_white_64ic_three_times_faster_64ic_touch_64ic_touch_id_64ic_touch_white_64ic_transparency_64ic_ui_design_desktop_64ic_ui_design_mobile_64ic_ui_design_mobile_white_64ic_umbrella_64ic_umbrella_64ic_umbrella_white_64ic_up_and_down_scaling_64ic_up_and_down_scaling_64ic_users_64ic_users_white_64ic_ux_design_64ic_ux_design_desktop_64ic_ux_design_64ic_ux_design_white_64ic_vehicle_64ic_web_based_search_64ic_web_based_search_white_64ic_web_browser_code_64ic_web_browser_developer_mode_64ic_web_browser_user_64ic_web_development_64ic_web_development_white_64ic_web_portals_64ic_web_portals_64ic_web_user_64ic_web_user_white64ic_workflow_64ic_workflow_steps_64ic_workflow_steps_white_64ic_workflow_white_64ic_working_environment_64solidity_blackGroup 19

SSR or CSR for Progressive Web App

This post is on the subject of Progressive Web Apps that we have already discussed in one of our previous articles. A simple development process, instant user interaction, the ability to work in autonomous mode. Yeah, that’s all about PWAs, whose business benefits for modern business processes are hard to deny.


1.Users can switch to progressive applications from links in social networks, while browsing web pages, or directly from search results.

2.The proposal to install a progressive application is shown only when the web application meets certain criteria.

3.App installation is instant. All components that require a long download have already been installed into the cache when the user first visited the website.



On the back of total installation of conventional (native) web applications, PWAs gain traction by acting in a smarter way compared to their ancestors, whose go-go days are gone.

US app downloads, Nomura research

We hope you realize  how much we love to work with PWAs. And in this article, we’d like to help you migrate your website to PWA and show how you can do that in the most seamless way, according to the opinion of K&C developers.

To choose server rendering, or not?

Creating a PWA doesn’t necessarily imply creating it from scratch. If you’re developing a modern SPA (single-page application), most probably you implement something similar to an app shell. PWA doesn’t include anything extraordinary, considering architecture and items to render:



-HTML, CSS and JS files

-Images, media

-Fonts

-Data used by JS to create content


Until recently, the most advantageous strategy to migrate was to rely on server-side rendering, a mature technique with rich tooling, which is not only perfect to render static content, but is also suitable for SEO and all connected to it.


Server-side rendering is an ideal solution if your app is intended to work with a great deal of data. Examples are calendars, mail boxes, really any content platforms. Moreover, the realization of server rendering is in no way worse on the client side. Almost any framework used for the client side (Java, Python) can be implemented under server-side rendering.


The situation is a little bit more complicated if it comes to JavaScript, but this can be also dealt with. We take Node.js and Express.js in order to get a basic server and choose a framework for page rendering. This can be a Handlebars.js template or React. Or if you want to dig deeper, you can even resort to such frameworks as La1 (Gmail is based on it) or GWT (Google Web Toolkit), yet they’re not so popular today.


From our own experience here at K&C, we’d advise you to go for the whole functionality on your own, rather than completely rely on ready-made solutions. Approach us to get a more extensive explanation why.


Client-side rendering (CSR) is in its turn more suitable when it comes to dynamic content. Also, it’s more beneficial considering browser performance.


In fact, each website does a kind of CSR, particularly now when there is a strong tendency to use mobile web. Any part of a page that is dynamic (a draggable slider, a sortable table, a dropdown menu) will implement CSR. However, while a major part of a SPA functions on the client side, the files do have to come from somewhere.


At this point, universal (isomorphic) JavaScript comes in, where the same rendering code is used as on the server as well as on the client side.


The point is that you don’t have to choose sides when there is a chance to use both approaches and benefit from it. Let’s not forget that server was, is, and will be always responsible for data. And with such technology as NodeJS, there is little difficulty to migrate the CSR code to the server and use it for SSR, and vice versa.


The main trick with all this is to not make your life difficult with unnecessary work. Choose both, and the K&C team will help you to realize it in a proper way.

SHARE WITH FRIENDS
You might find this interesting
E-book
Hiring Web Developers — The Complete Guide
E-book
Top Tools for Cost-Effective Web Development — eBook
Our cases
Reformation of Deployment Cycle for Bosch Classic Cars Portal
Our cases
Fast and Lightweight Mobile Application based on PhoneGap/ Cordova
E-book
Determining Approaches to Mobile App Development
Our cases
The Platform Providing Event Organization
Our cases
VAIX - Fault tolerant infrastructure for 24/7 high-load machine learning service
Testing
Qualität + Transparenz durch Agile Test Coaches
Other
ANGULAR, VUE, JQUERY, REACT ODER EMBER?
Web,Amazon Web Services
Vorteile durch Serverless Development für Startups: niedrigere Kosten, kürzere Time-to-Market
DevOps
Kubernetes Beratung – Übernehmen Sie die Kontrolle über Ihre K8s!
Other
Culture eats technology for breakfast
DevOps
DevOps als DevSecOps – Integrierter Schutz vor Bedrohungen ohne Termin- und Budgetüberschreitung
Web
Technologies that Foster Digital Transformation
Testing
Fallstudie Testautomatisierung: Cucumber, Selenium und Jira Xray
Web
Serverless Application Developers: Our Tech Talent, Your Success
DevOps
Hybrid, SAAS+PAAS: cloud solution trends to watch in 2019
Web
Advanced Technologies for Marketing Automation
Our cases
Portal Performance Tuning For Major German Travel Agency
Web,Outsourcing,Other
Angular 5.0.0 – A Better Version of Itself
Other
Swimming with Sharks
Web,DevOps,Our cases
Our case: Marketplace for gaming goods
Our cases
Bosch Classic Cars - Digital Engagement Platform for 19K Vintage Car Owners
Our cases
Reference: Major producer of auto electronics and spare parts
Web
A secret formula of an agile dream team
Our cases
Drivelog.de — Web Marketplace for Car Owners and Service Providers
E-book
Digital Transformation: the Philosopher’s Stone of Economic Growth
Web
Fintech Apps - A Lucrative Solution for Customers and Businesses Alike
Our cases
How to apply React Native while developing heavy cross-platform mobile apps
Outsourcing,Amazon Web Services
FUNKTIONEN VON AWS LAMBDA DEBUGGEN
Other
Europe’s Big Payments Directive PSD2
Web
Scaling software solutions - how it works
DevOps
Cloud-Trends 2019 - Hybrid, SAAS und PAAS | K&C Beratung
Web,Our cases
White Label: A Customized Software Solution from a Business and Tech Perspective
Web,Outsourcing,Other
JavaScript & WebSockets: How to Build Real-Time Applications
Web
A Guidance for Keeping Your Web Development Project Within the Budget: Three Key Pillars
Web
Debunking imaginary shortcomings of cross-platform frameworks
Web,Mobile,Outsourcing,Other
All You Wanted to Know About Chatbot Platforms
DevOps,Outsourcing
AWS DevOps: A New Way to Run Business
DevOps
Is Serverless Architecture the Future of Web Development?
Web
Centralized Logging with Logstash, Elasticsearch & Kibana
Web
Why Serverless Development For Start-Ups: Lower Costs, Faster to Market
DevOps
DevOps with Puppet: Tips on Setting it up for Configuring Servers
Our cases,Amazon Web Services
CLOUD SOLUTION VS. BARE METAL SERVER: WHEN AND WHY
Outsourcing
Agile entwickeln mit festen Budgets | K&C Software München
DevOps
KUBERNETES-BERATUNG: SCHRITT FÜR SCHRITT ZUM HEPTIO ARK (VELERO) BACKUP
Our cases
Liferay Portal Developers: Performance Tuning Case Study
Testing
Agile Test Coach - Ensuring Code Quality & Transparency
Other
I’m Tired of Blockchain Hype, Are You?
Web,Outsourcing,Other
JS Frameworks: The Trendiest Frameworks You Should Know
Web,Mobile,Amazon Web Services
SERVERLOSE ARCHITEKTUR FÜR CLOUD-BASIERTE APPS: TECHNOLOGIE-ANBIETER UND GRENZEN
DevOps
Security in Kubernetes and How Your Company Can Benefit from It
Web,Amazon Web Services
What's New In React 16.3.0 - 16.4.2 | K&C React Dev
Web,Amazon Web Services
React Developers Munich
Web,Amazon Web Services
Your Expert Angular Developers in Munich | K&C Development
Web
Angular 2.0 vs Angular 1.4. What fits you best?
Amazon Web Services
Hybrid Cloud Consulting Services in Munich
Web
Cost efficient technologies
Web
Plan to Succeed: 4 Tips for Building Scalable Software
DevOps
Installation and setting up: Nextcloud as a local network storage on CentOS7
Web,Other
How to Make Your Web Solution Rock: 7 Areas to Check
Web
Agile and DevOps are Key Drivers of Digital Transformation
Web
How to Motivate Your Dedicated Team to Work with Legacy Projects
Web
When Microservices Help Make Future-Ready Products
Web,Outsourcing,Other
How a Company Can Benefit from White Label: K&C experience
Web,Outsourcing
ANGULAR 6 versus REACT 16.3
Web,Outsourcing,Other
Angular 5 VS React.js – Who’s Going to Set the Tone in the Upcoming Year?
Other
Don’t Treat Me Like a Fool: The worst thing you can do for your business
DevOps
Docker: Virtualize Your Development Environment Right
Web
K&C insights: how to make your workflow work for you
Other
How to Convert Your Business to an Amazon-Style Market Leader
Other,Marketing
How to Become a Leader in Your Market
Web,Other
Dedicated Teams for Web Development: Choice Criteria to be Checked
Other
The Power of the Holistic Business Analysis
Web,Mobile,Back-end,Amazon Web Services
Why Enterprises Choose Serverless Architecture
Web
Pros and Cons of Serverless Web Development
Web,Amazon Web Services
Monolith, Microservices, Serverless... Are We in the Middle of the Way?
DevOps
Your DevOps Transformation Consulting Partner
Web,Outsourcing,Testing
Sicherheit für Web-Anwendungen - dank Threat Modeling
DevOps,Outsourcing
KUBERNETES ALS FÜHRENDE MICROSERVICE-ARCHITEKTUR IN PUNCTO SICHERHEIT
Web,Mobile
Wann eignen sich Progressive Web Apps ?
Outsourcing
SCALED AGILE FRAMEWORKS: HINTERGRÜNDE UND AUSFÜHRLICHER LEITFADEN
DevOps
DevOps Consulting – Our Business Is Automating Yours
DevOps
Kubernetes-Cluster absichern mit Hashicorp Consul/Vault
Our cases
Micro-service Architecture for New AngularJS Application - Case Study
Testing
What Is Quality Assurance and Why You Need It Immediately
Outsourcing
SCALED AGILE FRAMEWORKS: YOUR COMPLETE GUIDE TO WHICH, WHY AND HOW
DevOps
Serverless Architecture Consulting Services
Web
4 Time-Saving Ways to Test Your Cross Platform Mobile App
DevOps
Serverless Providers: A Comparative Analysis of AWS Lambda, Azure Functions & Google Cloud Functions
Our cases
CLOUD-LÖSUNG VS. BARE METAL SERVER: WANN MACHT WELCHER ANSATZ SINN?
Web,Outsourcing,Testing
Web App Security 101: Keep Calm and Do Threat Modeling
DevOps
How to Build a Rancher & Docker Based Cloud
Testing
Test Automation Case Study: Cucumber, Selenium and Jira Xray
DevOps
Kubernetes Consulting – Take Control of Your K8s!
Amazon Web Services
Auswahl Cloud-Provider ohne Vendor Lockin
Web,Mobile,Outsourcing
Progressive Web Apps and Why You May Need Them
DevOps,Amazon Web Services
Kubernetes at the Forefront of Secure Microservices Future
DevOps
How We Manage Our Infrastructure with Chef
Other
Big Data: Why Your Business Needs it ASAP
DevOps
How to setup Kubernetes cluster on AWS
Outsourcing,Other
How to Ramp up Your Team Wisely
Web,Other
GoLang: Features, Pros and Cons
DevOps,Outsourcing,Amazon Web Services
Information Security with AWS DevOps
Outsourcing
The BPM in the Microservice Environment
Web,Amazon Web Services
Single Page Application SEO: Tips & Tricks
Web
Web App Security 101: How to Defend Against a Brute Force Attack
Other
GDPR: Smart Practices
Web
Angular 4 vs React – what to choose in 2017
DevOps
How To Launch Kubernetes Federation on Google Cloud Platform
Web,Amazon Web Services
CLOUD DEPLOYMENT: YOUR APPLICATION’S OPTIONS
Web,Outsourcing
How to Control Agile Development: Progress and Costs
DevOps
What to Choose: NFS or CEPH?
Web,Amazon Web Services
Serverless vs. Hadoop & Containers In The Evolution Of Big Data & AI
Web,Amazon Web Services
Your Guide To AWS Cognito For Serverless User Authentication
Web,Outsourcing
Node.js vs. Angular.js – Two Sides of the Same Coin
DevOps
DevOps As DevSecOps – Full Integration of Threat Protection Without Compromising Deadlines or Budgets
Web,Outsourcing,Other
Angular vs. React vs. Vue – Let the Fight Start!
DevOps
How We Use Ansіble for Configuration of Our Environments
Web
Node.js 10.0.0: Everyone’s Favorite Got Even Better
DevOps
Setting Up: Traefik Balancer In Rancher Cloud
Web
Microservices… when do we need them?
DevOps
Ist serverlose Architektur die Zukunft der Webentwicklung?
Web,Outsourcing
Migration from Angular 1 to Angular 5
Mobile
Native or Hybrid Apps: A Quick Comparison
Web,Amazon Web Services
Vue.js 2019 - not Angular / React
Web,Outsourcing
Angular 6 Will Be A Hit
DevOps
Guide for Hashicorp Consul/Vault with Kubernetes
Outsourcing,Testing
Die Rolle des QS-Teams in Software-Projekten
DevOps,Outsourcing
Rancher 2.0: A Quick Look at the New Version
Web
JQuery vs. Angular: Ad Astra per Aspera
Mobile
WHY THE IONIC FRAMEWORK IS THE BEST CHOICE FOR YOUR HYBRID APP
DevOps
How to start services on Linux
Web,Mobile,Back-end,Amazon Web Services
Serverless Architecture for Modern Apps: Stacks Providers & Caveats
Other
Angular vs. Vue vs. jQuery vs. React vs. Ember
Outsourcing,Testing
How the QA Team Tests Your Project
DevOps
Use case: how to build and run Docker containers with NVIDIA GPUs
Web,Amazon Web Services
Cloud App Security: Three Authentication Approaches
DevOps
Kubernetes backup with Heptio Ark (Velero)
Marketing
Аudience-based Marketing
Outsourcing,Amazon Web Services
DEBUGGING AWS LAMBDA FUNCTIONS
DevOps,Outsourcing,Other
ROCKET.CHAT as an internal messaging system and helpdesk platform
Web
All You Need to Know About Web App Security Now
Web,Amazon Web Services
ANGULAR 7 OR REACT For Your App?
Web,Outsourcing,Other
Golang vs. Node.js
Web,Outsourcing
Angular 6 vs. Ember 3
Web,Outsourcing,Testing
QA for CxOs: How to Hire and Outsource
Web,Other
JAMSTACK IS THE NEW FACE OF STATIC SITES