Skip to content

Instantly share code, notes, and snippets.

@nezort11

nezort11/webapp-archecture.md

Last active September 18, 2021 19:59
Show Gist options
  • Save nezort11/9766ba5835f1f1824fcf40e53c6a2a59 to your computer and use it in GitHub Desktop.
Save nezort11/9766ba5835f1f1824fcf40e53c6a2a59 to your computer and use it in GitHub Desktop.
Download ZIP
Web app architecture
Raw
webapp-archecture.md

How to connect back-end and front-end

Differ my data:

  1. When data will come?
  2. When data will be rendered?

Differ by purposes:

  1. For development
  2. For production

Webapp architecture:

  1. Templating (data is already there)
    1. Server-side rendering
      • rendered HTML (template)
    2. Client-side rendering
      • JavaScript + rendered data (static file)
  2. API (fetch data)
    1. Cross-orgin (different frontend server and origin)
      • JavaScript (Nginx)
      • React.js (Nginx)
    2. Same-origin (different frontend server on the same origin)
      • JavaScript (Nginx via proxy)
      • React.js (Nginx via proxy)
    3. Server from backend (frontend on backend server and origin)
      • JavaScript (static file)
      • React.js (build npm to static file)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment