diff --git a/IHP/ServerSideComponent/Controller/ComponentsController.hs b/IHP/ServerSideComponent/Controller/ComponentsController.hs
index d4b5c7506..5ce7f76d7 100644
--- a/IHP/ServerSideComponent/Controller/ComponentsController.hs
+++ b/IHP/ServerSideComponent/Controller/ComponentsController.hs
@@ -7,7 +7,7 @@ import IHP.ServerSideComponent.ControllerFunctions as SSC
 
 import qualified Data.Aeson as Aeson
 
-instance (Component component controller, FromJSON controller) => WSApp (ComponentsController component) where
+instance (Component component controller, Aeson.FromJSON component, FromJSON controller, ToJSON controller) => WSApp (ComponentsController component) where
     initialState = ComponentsController
 
     run = do
@@ -30,3 +30,13 @@ instance (Component component controller, FromJSON controller) => WSApp (Compone
                     nextState <- SSC.action currentState theAction
                     SSC.setState nextState
                 Left error -> putStrLn (cs error)
+                Left error -> do
+                    let theState = Aeson.eitherDecode @component actionPayload
+
+                    case theState of
+                        Right initialState -> do
+                            SSC.setState initialState
+                        Left error -> do
+                            putStrLn "Failed Parsing Server Side Component Message As JSON"
+                            putStrLn (cs actionPayload)
+                            putStrLn (cs error)
\ No newline at end of file
diff --git a/IHP/ServerSideComponent/RouterFunctions.hs b/IHP/ServerSideComponent/RouterFunctions.hs
index f4045b14a..e50f86722 100644
--- a/IHP/ServerSideComponent/RouterFunctions.hs
+++ b/IHP/ServerSideComponent/RouterFunctions.hs
@@ -18,8 +18,10 @@ import IHP.ApplicationContext
 
 routeComponent :: forall component controller application.
     ( Typeable component
+    , FromJSON component
     , Component component controller
     , FromJSON controller
+    , ToJSON controller
     , InitControllerContext application
     , Typeable application
     , ?application :: application
diff --git a/IHP/ServerSideComponent/ViewFunctions.hs b/IHP/ServerSideComponent/ViewFunctions.hs
index 6b5dd8b17..7487c3f80 100644
--- a/IHP/ServerSideComponent/ViewFunctions.hs
+++ b/IHP/ServerSideComponent/ViewFunctions.hs
@@ -9,16 +9,17 @@ import IHP.Prelude
 import IHP.ViewSupport
 import IHP.ServerSideComponent.Types
 import IHP.HSX.QQ (hsx)
+import qualified Data.Aeson as Aeson
 
 import qualified Data.Typeable as Typeable
 
-component :: forall component action. (Component component action, Typeable component) => Html
+component :: forall component action. (Component component action, Typeable component, Aeson.ToJSON component) => Html
 component = componentFromState (initialState @component)
 
-componentFromState :: forall component action. (Component component action, Typeable component) => component -> Html
-componentFromState state = [hsx|<div class="ihp-ssc" data-path={path}>{render state}</div>|]
+componentFromState :: forall component action. (Component component action, Typeable component, Aeson.ToJSON component) => component -> Html
+componentFromState state = [hsx|<div class="ihp-ssc" data-path={path} data-initial-state={Aeson.encode state}>{render state}</div>|]
     where
         path = "/SSC/" <> typeName
         typeName = (undefined :: component)
                 |> Typeable.typeOf
-                |> show
\ No newline at end of file
+                |> show
diff --git a/lib/IHP/static/vendor/ihp-ssc.js b/lib/IHP/static/vendor/ihp-ssc.js
index 0b8215ec4..cc2d076b8 100644
--- a/lib/IHP/static/vendor/ihp-ssc.js
+++ b/lib/IHP/static/vendor/ihp-ssc.js
@@ -28,6 +28,9 @@ function initalizeSSC(component) {
 
     component.connection.onopen = function (event) {
         if (debugMode) console.log('Connected');
+
+        // Send Initial State
+        component.connection.send(component.dataset.initialState)
     };
 
     component.connection.onclose = function (event) {